清除浮动的css写法是什么
小编给大家分享一下清除浮动的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
那么,只在一侧不允许浮动是怎样的呢?
本来是酱紫的:
那么,只在一侧不允许浮动是怎样的呢?
本来是酱紫的: