时间:2021-07-01 10:21:17 帮助过:61人阅读
道理和左浮动基本一样,只不过需要注意一下前后对应关系。由于是右浮动,因此右边靠近页面边缘,所以右边是前,因此p2在最右边。
假如我们把p2、p4左浮动,效果图如下:
依然是根据结论,p2、p4浮动,脱离了标准流,因此p3将会自动上移,与p1组成标准流。p2发现上一个元素p1是标准流中的元素,因此p2相对垂直位置不变,与p1底部对齐。p4发现上一个元素p3是标准流中的元素,因此p4的顶部和p3的底部对齐,并且总是成立的,因为从图中可以看出,p3上移后,p4也跟着上移,p4总是保证自己的顶部和上一个元素p3(标准流中的元素)的底部对齐。
至此,恭喜读者已经掌握了添加浮动,但还有清除浮动,有上边的基础清除浮动非常容易理解。
经过上边的学习,可以看出:元素浮动之前,也就是在标准流中,是竖向排列的,而浮动之后可以理解为横向排列。
清除浮动可以理解为打破横向排列。
清除浮动的关键字是clear,官方定义如下:
语法:
clear : none | left | right | both
取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
定义非常容易理解,但是读者实际使用时可能会发现不是这么回事。
定义没有错,只不过它描述的太模糊,让我们不知所措。
根据上边的基础,假如页面中只有两个元素p1、p2,它们都是左浮动,场景如下:
此时p1、p2都浮动,根据规则,p2会跟随在p1后边,但我们仍然希望p2能排列在p1下边,就像p1没有浮动,p2左浮动那样。
这时候就要用到清除浮动(clear),如果单纯根据官方定义,读者可能会尝试这样写:在p1的CSS样式中添加clear:right;,理解为不允许p1的右边有浮动元素,由于p2是浮动元素,因此会自动下移一行来满足规则。
其实这种理解是不正确的,这样做没有任何效果。
对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。
怎么理解呢?就拿上边的例子来说,我们是想让p2移动,但我们却是在p1元素的CSS样式中使用了清除浮动,试图通过清除p1右边的浮动元素(clear:right;)来强迫p2下移,这是不可行的,因为这个清除浮动是在p1中调用的,它只能影响p1,不能影响p2。
要想让p2下移,就必须在p2的CSS样式中使用浮动。本例中p2的左边有浮动元素p1,因此只要在p2的CSS样式中使用clear:left;来指定p2元素左边不允许出现浮动元素,这样p2就被迫下移一行。
那么假如页面中只有两个元素p1、p2,它们都是右浮动呢?读者此时应该已经能自己推测场景,如下:
此时如果要让p2下移到p1下边,要如何做呢?
我们希望移动的是p2,就必须在p2的CSS样式中调用浮动,因为浮动只能影响调用它的元素。
可以看出p2的右边有一个浮动元素p1,那么我们可以在p2的CSS样式中使用clear:right;来指定p2的右边不允许出现浮动元素,这样p2就被迫下移一行,排到p1下边。
后边来延伸一下:
如果不加clear:both效果是这样的:
灰色的背景色并没有添加到第二行,因为第二行都是float的,和.ob-body不在一个层面上,第二行浮在.ob-body上层,用了伪类:after就是为了让第二行回到地面上来
<head> <style> .ob-title{ background-color: orange; } .ob-body{ background-color: #ddd; } .ob-body .menu{ float: left; width: 200px; background-color: pink; } .ob-body .content{ float: left; background-color: aquamarine; } .clearfix:after{ /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/ content: ""; display: block; /*block宽度会横向填充满屏幕,在父元素的最后追加一个height:0,占满屏幕的看不见的细长条*/ line-height: 0; clear: both; /*这个最下边细长条左右两边都清除float*/ } </style></head><body style="margin: 10px;"> <p class="ob-title">头部信息</p> <p class="ob-body clearfix"> <!--此处调用尾类--> <p class="menu">左侧菜单</p> <p class="content">右侧内容</p> <!--<p style="clear: both;"></p>--> <!--第二种写法,不用调用clearfix类--> </p></body>
加了clear:both之后的效果:
最后解析一下:为什么加了clearfix就ok了。两种写法其实一个意思,就是在.ob-body的最后加入一个空的<p>
(只要是块的就行,因为只有块,才可以横向撑满),这个<p>
其实就是一个看不见的细长条,因为他在.ob-body的最下边,并且并不是float的,一定会受到.ob-body的背景色的控制,他的存在定义了.ob-body的高度,所以高度范围内都会被灰色的背景色影响到,虽然第二行依旧是飘在天空,但地面已经被铺上了银色。并且这个最下边的<p>
必须要有clear:both,不然如果只是标准流,会紧贴在第一行的底部,当然不能涵盖第二行了,其实这个例子里使用clear:left也有效(因为第二行都是float:left),但为了通用性,就使用both吧.并且也验证了:这个规则只能影响使用清除的元素本身,不能影响其他元素,clear了隐藏p的both。
以上就是CSS-float详细介绍之clear:both的详细内容,更多请关注Gxl网其它相关文章!