CSS浮动详解
浮动 float
网页布局的实质，通过css 来摆放盒子，把盒子放到相应的位置
CSS提供了三种传统网页布局方式
（1） 标准流 就是标签按规定好的方式排列
（2） 浮动
（3）定位
float : none; // 不浮动 （默认值）
float : left; // 左浮动
float : right; // 右浮动
浮动最典型的应用： 令多个块级元素在一行内排列显示
浮动的特点
（1）浮动元素会脱离标准流
浮动的元素会脱离标准流的控制浮动到指定位置
浮动的元素将不再保留原先的位置，它后面的元素将会占据它的位置
（2）任何元素都可以浮动
下面我们初始化一个类名为box的div盒子， 里面有两个小的div盒子
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 width: 500px; 11 height: 300px; 12 background-color: #999; 13 } 14 15 .d1 { 16 17 width: 100px; 18 height: 100px; 19 background-color: blue; 20 text-align: center; 21 line-height: 100px; 22 font-size: 28px; 23 } 24 25 .d2 { 26 width: 150px; 27 height: 150px; 28 background-color: blueviolet; 29 text-align: center; 30 line-height: 150px; 31 font-size:28px; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="box"> 38 <div class="d1">盒子1</div> 39 <div class="d2">盒子2</div> 40 </div> 41 42 </html>
给盒子1，和盒子2 添加左浮动
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box { 10 width: 500px; 11 height: 300px; 12 background-color: #999; 13 } 14 15 .d1 { 16 float: left; 17 width: 100px; 18 height: 100px; 19 background-color: blue; 20 text-align: center; 21 line-height: 100px; 22 font-size: 28px; 23 } 24 25 .d2 { 26 float: left; 27 width: 150px; 28 height: 150px; 29 background-color: blueviolet; 30 text-align: center; 31 line-height: 150px; 32 font-size:28px; 33 } 34 </style> 35 </head> 36 37 <body> 38 <div class="box"> 39 <div class="d1">盒子1</div> 40 <div class="d2">盒子2</div> 41 </div> 42 43 </html>
可以明显的看出 左浮动是相对于其父级元素来说的
所以浮动元素经常和标准流的父级元素搭配使用，先用标准流父级元素排列上下位置吗，再之后内部的子元素采用浮动的方法
排列左右位置
给盒子1 添加一个左浮动，盒子2不添加
可以看出由于盒子1添加了浮动，它就会脱离标准流的控制，并且不再保留原先的位置。盒子2会升上来占据它的位置
清除浮动
我们在很多时候不方便给父盒子一个高度，但是如果其子盒子是浮动的，那么当父盒子的高度变为0时，下面的标准流盒子就会升上来，影响布局
就如下面这段代码，由于子盒子1 添加了浮动，脱离了标准流，不再占有位置，就无法撑起其父盒子，而其父盒子的宽度是0px,所以父盒子就是上面哪一条黑线，而下面的另一个盒子父盒子2就会占据它们的位置
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box{ 9 width: 600px; 10 border:1px solid black; 11 margin:0 auto; 12 } 13 .d1{ 14 float: left; 15 width: 100px; 16 height: 100px; 17 background-color: burlywood; 18 font-size: 25px; 19 text-align: center; 20 line-height: 100px; 21 22 } 23 .box02{ 24 width: 600px; 25 height: 600px; 26 margin: 0 auto; 27 background: cadetblue; 28 font-size: 25px; 29 text-align: center; 30 line-height: 600px; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="box"> 36 <div class="d1">子盒子1</div> 37 </div> 38 39 <div class="box02">父盒子2</div> 40 </body> 41 </html>
清除浮动的本质：清除浮动元素造成的影响，如果父级盒子本身有高度，是不需要清除浮动的，
清除浮动后，父级就会根据浮动的子盒子自动检测添加高度，父级有了高度，就不会影响下面的标准流了
清除浮动的方法 ：额外标签法
在最后的浮动的标签后边添加一个标签，样式中 添加 claer : both;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 .box{ 9 width: 600px; 10 border:1px solid black; 11 margin:0 auto; 12 } 13 .d1{ 14 float: left; 15 width: 100px; 16 height: 100px; 17 background-color: burlywood; 18 font-size: 25px; 19 text-align: center; 20 line-height: 100px; 21 22 } 23 .box02{ 24 width: 600px; 25 height: 600px; 26 margin: 0 auto; 27 background: cadetblue; 28 font-size: 25px; 29 text-align: center; 30 line-height: 600px; 31 } 32 .clear{ 33 clear: both; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="box"> 39 <div class="d1">子盒子1</div> 40 <div class="clear"></div> 41 </div> 42 43 <div class="box02">父盒子2</div> 44 </body> 45 </html>
