利用clear清除浮动的一些问题

YancyYe 发布于2019-08-30 15:55 / 1706人阅读

摘要：下面这段代码是用来清除浮动带来的高度塌陷问题上面的代码的能够实现清除浮动的问题吗因为属性只能控制元素本身与前面的浮动元素的关系。是因为本质上，浮动并没被清除，我们只是利用属性解决了浮动元素带来的父级元素高度塌陷问题。

下面这段代码是用来清除浮动带来的高度塌陷问题

.clearfix:before {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Question 1: 上面的代码的能够实现清除浮动的问题吗？

Answer： Can"t. 因为clear属性只能控制元素本身与前面的浮动元素的关系。在本例中，使用:before伪元素明显位于所有子元素之前，故而clear属性不会因后面的浮动元素产生任何作用效果。 clear属性的官方定义可以查看CSS文档。那么应该如何修改呢？将:before换成:after即可。最终代码如下：

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Question 2: content属性的内容能改成空吗content: "";？

Answer： Yes. 因为设置了 height:0; 和 visibility: hidden。如果设置了content:"";，那么 height:0; 和 visibility: hidden和可以去掉吗？当然可以，因为块元素没有内容就不会有高度咯。

更改后的代码如下：

.clearfix:after {
    content: ""; 
    display: block;
    clear: both;
}

Question 3: display属性的内容能改成 inline 或 inline-block 吗？

Answer：不能。我们要明白float属性的初衷————让文字环绕图片展示。翻译成另外一句话：内联级别的元素会环绕浮动元素展示。那么为什么 display: block;可以解决高度塌陷的问题呢。因为 clear属性的含义是不让元素本身与浮动元素的边界相邻。如果块级元素要不与块级元素边界相邻，只有换到下一行展示。也正为换行，才将父元素到高度撑开了，正式上面的代码解决高度塌陷的原理。

Question 4: 下面到div元素会存在高度塌陷问题吗？



    历史的天空

Answer：存在。为什么呢？要知道 clear属性中， clear:left; 和 clear:right; 的区别。

left : 不与左浮动的元素产生边界接触；

right : 不与右浮动的元素产生边界接触；

both : 不与左浮动和右浮动的元素产生边界接触；

所以上面的代码不会解决高度塌陷到问题。

如果有如下代码：

你会发现，两个div的展示效果是相同的。也就是说，如果前面同时存在左浮动和右浮动到元素，那么clear属性值无论设成left 还是right都无关紧要。反过来想，如果clear属性设成 both，那么无论前面的元素是左浮动还是右浮动，都无关紧要。这也是clearfix通常设置 clear:both;的原因。

注意一点，我们一直在说解决高度塌陷都问题，从来没有说清除浮动。是因为本质上，浮动并没被清除，我们只是利用clear属性解决了浮动元素带来的父级元素高度塌陷问题。而且clear属性影响也只是设置clear属性的元素本身，而不是浮动元素。

云服务器 GPU云服务器浮动clear 清除浮动云服务器可以清除哪一些文件 html5浮动问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117268.html

清楚浮动/边界塌陷bfc

摘要：不会重叠浮动元素可以包含浮动我们可以利用的第三条特性来清浮动，这里其实说清浮动已经不再合适，应该说包含浮动。总而言之清理浮动两种方式利用属性，清除浮动使父容器形成 CSS清浮动处理（Clear与BFC）在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼 1 浮动带来布局的便利，却也带来了新问题复制代码 1 2 3 4 ...

remcarpediem 2019-08-30 11:25 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
css清除浮动常用的四种方法实现

摘要：用这种方法清除浮动，会为文档中增加不必要的结构，不推荐。可以包含浮动元素，所以能实现撑起高度的效果。以上是常用的几种方法，可以根据场景的不同选择适合的。在页面布局中经常会用到浮动和清除浮动的操作，但之前是知其然而不知其所以然，看过多篇文章后，有了一些深入的了解，特整理下来！浮动的目的：最初设计浮动的目的是为了实现文字等内容可围绕图像显示，后来发现浮动方便布局，所以支持浮动任何元素...

iliyaku 2019-08-29 16:14 评论0 收藏0
CSS清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

摘要：方法三据说是最高大上的方法方法注意作用于浮动元素的父亲先说原理这种方法清除浮动是现在网上最拉风的一种清除浮动，他就是利用和来在元素内部插入两个元素块，从面达到清除浮动的效果。的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清楚浮动。一、抛一块问题砖（display： block）先看现象： showImg(https://segmentfault.com/img/bVrWvS)...

MAX_zuo 2019-08-28 18:28 评论0 收藏0
你从来没了解过的CSS浮动 | Design Shack

摘要：另一种元素是内联元素，它们会与之前的内容保持显示在一行。即使图片是内联元素，它们也被它们的父块级元素列表项控制。当一行中多个元素被浮动，它们会产生同内联元素的流类似的效果。浮动元素不能高过前一行内联元素。浮动到底是做什么呢？他们是如何影响相关元素的盒模型的呢？浮动的元素与内联元素有什么不同呢？制定浮动元素的位置的具体规则是什么？clear属性是如何工作的，并且它的作用是什么？即使是...

XGBCCC 2019-08-02 16:13 评论0 收藏0