Into a block-level element - the problem of width-CodePudding

I want to ask: # 31, I did not give a and a width of the parent, and has become a block-level elements, - block-level elements if no width, default is as wide as the parent,
Only inline or inline block elements, the width will be open from content, - but why these is a block-level elements, or width based on the content to open?

Thank you,

 
 

 
<meta charset="utf-8" & gt; 
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt; 
 Document 
<style> 
* {
Margin: 0; 
Padding: 0; 
} 

. Box1 {
float: left; 
Width: 209 px; 
Height: 45 px; 
background-color: pink; 
} 

The box2 {
float: left; 
} 

Li {
float: left; 
The list - style: none; 
} 

The box a {
display: block; 
Height: 45 px; 
The line - height: 45 px; 
Padding: 0 px 30; 
Border: 1 px solid # 000; 
Background - color: skyblue; 
} 
</style> 
 

<body>