清除浮动的css写法有哪些
导读： 一、float（浮动）是什么 float属性定义元素在哪个方向浮动。 float:left元素向左浮动。 float:right元素向右浮动。 float:none默认值。元素不浮动，并会显示在其在文本中出现的位...
一、float（浮动）是什么
float属性定义元素在哪个方向浮动。
float:left元素向左浮动。
float:right元素向右浮动。
float:none默认值。元素不浮动，并会显示在其在文本中出现的位置。
float:inherit规定应该从父元素继承float属性的值。
看一段简单的代码：
左浮动
右浮动
喵
.child1{
float:left;
height:500px;
width:70%;
background:#aa0;
//黄
}
.child2{
float:right;
height:300px;
width:30%;
background:#0aa;
//青
}
.child3{
background:#a0a;
//紫
}
201904291427231.png
二、clear是什么
clear属性指定段落的左侧或右侧不允许浮动的元素。
clear:left在左侧不允许浮动元素。
clear:right在右侧不允许浮动元素。
clear:both在左右两侧均不允许浮动元素。
clear:none默认值。允许浮动元素出现在两侧。
clear:inherit规定应该从父元素继承clear属性的值。
比如上面的例子，我们为child3加上clear:both;
，便可清除浮动。（child3的左右两侧都不允许浮动元素，自然而然不会再跟在俩浮动元素的屁股后面了~）
201904291427232.png
那么，只在一侧不允许浮动是怎样的呢？
本来是酱紫的：
那么，只在一侧不允许浮动是怎样的呢？
本来是酱紫的：
child1右浮动
child2右浮动
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...
.child1{
float:right;
background:#aa0;
//黄
}
.child2{
float:right;
background:#0aa;
//青
}
201904291427233.png
然后，为child2加上clear:right;
，在child2的右侧不允许浮动元素，所以child2就飘到了下一行。
201904291427234.png
那么，为child1加上clear:left;
的时候，为什么不起效果呢？在这留个小彩蛋，欢迎大家留言讨论~
三、浮动带来的影响
浮动带来的最大影响就是，当父元素只包含浮动的子元素的时候，父元素的高度就会塌陷（height变为0）。
像酱紫：（parent高度为0，无法显示粉色背景）
child1右浮动
child2右浮动
.parent{
background:#FBC;
//粉
}
201904291427235.png
四、清除浮动的方式
1.在父元素中的结尾加一个空div
div
child1右浮动
child2右浮动
.child1{
float:right;
background:#aa0;
}
.child2{
float:right;
background:#0aa;
}
201904291427246.png
可见，空div高度为0，位于父盒子的最下面，使父盒子重新撑起了应有的高度。
为什么要在最后加？倘若你在中间加，效果会是酱紫：
201904291427247.png
由于空div的左右都不允许浮动元素，那么它就会另起一段，导致盒子位置的效果就像child2清除右侧浮动一样，child2跑到了child1下方。
2.在父元素设置overflow属性
•原理：设置overflow:hidden或overflow:auto，浏览器会自动检查浮动区域高度（才能知道父框的内容有无溢出）
•优点：浏览器支持好
•缺点：子元素若超出父元素尺寸会被隐藏，或者父元素出现滚动条
child1右浮动
child2右浮动
201904291427248.png
当设置overflow:auto;
时，父元素会出现滚动条：
201904291427249.png
3.伪元素
•原理：类似设置clear属性
•优点：浏览器支持好，普遍
child1右浮动
child2右浮动
.clearfix{
zoom:1;
//zoom（IE专有属性）可解决ie6，ie7浮动问题
display:block;
}
.clearfix:after{
content:".";
//content:"";
也可
visibility:hidden;
display:block;
height:0;
clear:both;
}
更多CSS问题的相关技术文章，请访问CSS问题教程栏目进行学习！声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 清除浮动的css写法有哪些
本文地址： https://pptw.com/jishu/668320.html