建站
咨询
售后
建站咨询
小编给大家分享一下清除浮动的css写法是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都创新互联公司坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。10余年网站建设经验成都创新互联公司是成都老牌网站营销服务商,为您提供成都网站设计、做网站、成都外贸网站建设公司、网站设计、H5场景定制、网站制作、品牌网站建设、小程序设计服务,给众多知名企业提供过好品质的建站服务。
一、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{
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，无法显示粉色背景）
.parent{
background:#FBC;//粉
}
201904291427235.png
四、清除浮动的方式
1.在父元素中的结尾加一个空div
div
