CSS 浮动及应用，清除浮动
Posted 小123654
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 浮动及应用，清除浮动相关的知识，希望对你有一定的参考价值。
浮动一开始是做文字环绕的
浮动需要添加标准流父级，也就是父盒子。这里要提一下文档流，就是好几个div组成的模块，叫做文档流，然后给其中一个盒子float起来，就代表这个盒子脱离了文档流，下一个div就会填充脱离了文档流div的原本位置。
那最后在html网页中我们看到的就是这个画面
div1就是浮动起来的画面，div2补充了div1原本的位置，被div1给挡住了。
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。
使用css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
要记住，浮动的目的是为了让多个块级元素在同一行进行显示
清除浮动的本质是为了解决父级元素因为子级元素浮动高度变为0的问题，也就是我们所说的浮动塌陷的问题。
就像div1浮动了，div2被遮盖，我们所要解决的就是这个问题
第一种解决方法就是添加额外的标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .box1 { 8 width: 600px; 10 background-color: black; 11 } 12 .box2 { 13 width: 200px; 14 height: 300px; 15 background-color: pink; 16 } 17 .son1 { 18 width:200px; 19 height:200px; 20 background-color:skyblue; 21 float:left; 22 } 23 .son2 { 24 width: 300px; 25 height: 200px; 26 background-color: white; 27 float: left; 28 } 29 30 .clear1 { 31 clear: both; /*清除浮动的影响*/ 32 } 33 34 </style> 35 </head> 36 <body> 37 <div class="box1"> 38 <div class="son1"></div> 39 <div class="son2"></div> 40 <!--在浮动的盒子后面添加一个空盒子--> 41 <div class="clear1"></div> 42 </div> 43 <div class="box2"></div> 44 45 </body> 46 </html>
第二种方法是给父级添加overflow:hidden
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .box1 { 8 width: 600px; 9 background-color: black; 10 overflow:hidden; 11 } 12 .box2 { 13 width: 600px; 14 height: 300px; 15 background-color: pink; 16 } 17 .son1 { 18 width:200px; 19 height:200px; 20 background-color:skyblue; 21 float:left; 22 } 23 .son2 { 24 width: 300px; 25 height: 200px; 26 background-color: white; 27 float: left; 28 } 29 30 </style> 31 </head> 32 <body> 33 <div class="box1"> 34 <div class="son1"></div> 35 <div class="son2"></div> 36 </div> 37 <div class="box2"></div> 38 39 </body> 40 </html>
第三种方法使用伪元素清除浮动（给父级添加）
在盒子后面添加一个
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .box1 { 8 width: 600px; 9 background-color: black; 10 } 11 .box2 { 12 width: 600px; 13 height: 300px; 14 background-color: pink; 15 } 16 .son1 { 17 width:200px; 18 height:200px; 19 background-color:skyblue; 20 float:left; 21 } 22 .son2 { 23 width: 300px; 24 height: 200px; 25 background-color: white; 26 float: left; 27 } 28 .clearfix:after { 29 content:".";/*内容为小点，尽量加不要空*/ 30 display:block;/*转换为块级元素*/ 31 height:0; 32 visibility:hidden;/*隐藏盒子*/ 33 clear:both;/*清除浮动*/ 34 } 35 .clearfix { 36 *zoom:1; /* *代表ie6，7能识别的特殊符号 */ 37 } 38 </style> 39 </head> 40 <body> 41 <div class="box1 clearfix"> 42 <div class="son1"></div> 43 <div class="son2"></div> 44 </div> 45 <div class="box2"></div> 46 47 </body> 48 </html>
最终效果
第四种方法是设置双伪元素清除浮动（比较常用）
在盒子前面后面添加
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style type="text/css"> 7 .father { 8 border:1px solid red; /*不清楚父亲高度的时候，让里面的内容自动撑开盒子*/ 9 } 10 11 .damao { 12 width: 100px; 13 height: 100px; 14 background-color: pink; 15 float:left; 16 } 17 18 .ermao { 19 width: 150px; 20 height: 100px; 21 background-color: purple; 22 float: left; 23 } 24 25 .xiaomi { 26 width: 300px; 27 height: 120px; 28 background-color: #000; 29 } 30 31 .clearfix:before, .clearfix:after { 32 content: " "; 33 display: table; 34 } 35 36 .clearfix:after { 37 clear: both 38 } 39 40 .clearfix:after { 41 *zoom: 1; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="father clearfix"> 47 <div class="damao"></div> 48 <div class="ermao"></div> 49 </div> 50 <div class="xiaomi"></div> 51 52 </body> 53 </html>
最终显示的效果就是这样
详情点击下方
以上是关于CSS 浮动及应用，清除浮动的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）