There is the following code:
<html>
<head>
<title>Title</title>
</head>
<body>
<div>
<div style="float:left"
jingjingjingjingjinagjing
</div>
<div style="float:left">
<span>wo ai bei jing tian an men</span>
</div>
<div>jiujiang is a beautiful city</div>
</div>
</body>
</html>Phenomenon:
1. The width of the outermost div is 1294px, and the height is 0. The analysis is as follows:
the use of float in the inner sub-div leads to the above result. It can be seen that when the inner sub-div uses float, the width of the sub-div is not displayed as The width of the browser is determined by the content in the div, and it will not occupy a line . The second sub-div that uses float will not be displayed as a new line, and the third sub-div that does not use float will put the first two in the same line. The first-level div is regarded as transparent, as if the first two divs are not the same, but the content will be displayed next to the first two same-level divs ,
2. The div without float ** does not wrap , but is next to the float div**, if you want to eliminate the next one , you need to add one after the floating div <div style="clear:both; "></div>, so that the non-floating div is displayed as a new line
Clause :
The child div that uses the float attribute cannot support the height of the parent div