清除浮动



楼主 联合国  发布于 2019-07-09 14:44:00 +0800 CST  
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

楼主 联合国  发布于 2019-07-09 17:04:00 +0800 CST  
CSS 浮动
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:


楼主 联合国  发布于 2019-07-09 17:05:00 +0800 CST  
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
因此,创建浮动框可以使文本围绕图像:

要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

这是一个有用的工具,它让周围的元素为浮动元素留出空间。

楼主 联合国  发布于 2019-07-09 17:06:00 +0800 CST  
让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:
.news { background-color: gray; border: solid 1px black; }
.news img { float: left; }
.news p { float: right; }
<div class="news"><img src="news-pic.jpg" /><p>some text</p></div>


这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。

楼主 联合国  发布于 2019-07-09 17:08:00 +0800 CST  
如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:

不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。

楼主 联合国  发布于 2019-07-09 17:09:00 +0800 CST  
.news { background-color: gray; border: solid 1px black; }
.news img { float: left; }
.news p { float: right; }
.clear { clear: both; }


<div class="news"><img src="news-pic.jpg" /><p>some text</p><div class="clear"></div></div>

楼主 联合国  发布于 2019-07-09 17:10:00 +0800 CST  

楼主:联合国

字数:1325

发表时间:2019-07-09 22:44:00 +0800 CST

更新时间:2020-04-09 12:41:25 +0800 CST

评论数:7条评论

帖子来源:百度贴吧  访问原帖

 

热门帖子

随机列表

大家在看