1）可以看出，即使div1 的宽度很小，页面中一行可以容下div1 和div2，div2 也不会排
在div1 后边，因为div 元素是块级元素，独占一行的。
2）如何在一行显示多个div 元素
3）显然默认的标准流已经无法满足需求，这就要用到浮动。浮动可以理解为让某个div
元素（或者其他块级元素）脱离标准流，漂浮在标准流之上。
4）例如，假设上图中的div2 浮动，那么它将脱离标准流，但div1、div3、div4 仍然在标
准流当中，所以div3 会自动向上移动，占据div2 的位置，重新组成一个流。如
float:left;/*向左边浮动*/
<!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css浮动</title> <style type="text/css"> #div1 { width:200px; height:100px; background:#9900FF;} #div2 { width:500px; height:60px; background:#00AAAA; float:left;/*向左边浮动*/} #div3 { width:170px; height:100px; background:#CCCCFF;} #div4 { width:90px; height:90px; background:#D87093;} </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> </body> </html>
clear:left;/*清除左浮动*/
clear:both;不允许浮动
<!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css浮动</title> <style type="text/css"> #div1 { width:200px; height:100px; background:#9900FF;} #div2 { width:500px; height:60px; background:#00AAAA; float:left;/*向左边浮动*/} #div3 { width:170px; height:100px; background:#CCCCFF; clear:left;/*清除左浮动*/} #div4 { width:90px; height:90px; background:#D87093;} </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> </body> </html>
如果连续多个元素设置浮动呢？
结论：被设置浮动的元素会组成一个流，并且会横着紧挨着排队，直到父元素的
宽度不够才会换一行排列。
#div1 {
200px;
height:100px;
background:#9900FF;
float:left;/*向左边浮动*/}
#div2 {
500px;
height:60px;
background:#00AAAA;
float:left;/*向左边浮动*/}
#div3 {
170px;
height:100px;
background:#CCCCFF;
float:left;/*向左边浮动*/}
#div4 {
90px;
height:90px;
background:#D87093;
float:left;/*向左边浮动*/}
