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


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

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

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属性的内容能改成 inlineinline-block 吗?

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

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

```<style>
.clearfix::after {
content: "";
display: block;
clear:left;
}
img { float: right; }
</style>
<div class="clearfix">
<span>历史的天空</span>
<img src="data:images/naruto.gif">
</div>
```

Answer: 存在。为什么呢?要知道 clear属性中, clear:left;clear:right; 的区别。

  • left : 不与左浮动的元素产生边界接触;
  • right : 不与右浮动的元素产生边界接触;
  • both : 不与左浮动和右浮动的元素产生边界接触;

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

如果有如下代码:

    .clear-left { clear:left; }
.clear-right { clear:right; }
.fl { float: left;}
.fr { float: right;}
.box {
height: 30px; width: 30px;
background: yellowgreen;
margin: 5px;
}
&lt;/style&gt; &lt;div&gt;
&lt;div class="box fl"&gt;1&lt;/div&gt;
&lt;div class="box fr"&gt;2&lt;/div&gt;
&lt;div class="box clear-left"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div class="box fl"&gt;1&lt;/div&gt;
&lt;div class="box fr"&gt;2&lt;/div&gt;
&lt;div class="box clear-right"&gt;3&lt;/div&gt;
&lt;/div&gt;å

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

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

来源:https://segmentfault.com/a/1190000017934125

利用clear清除浮动的一些问题的更多相关文章

  1. 【CSS】clear清除浮动

    clear清除浮动1.作用: 规定元素的某一侧不允许存在浮动元素 2.值: 3.应用: 清除其他浮动元素对其产生的影响 <!DOCTYPE html> <html lang=&quo ...

  2. day68-CSS-float浮动,clear清除浮动,overflow溢出

    1. float 浮动 1.1 在 CSS 中,任何元素都可以浮动. 1.2 浮动元素会生成一个块级框,而不论它本身是何种元素.内联标签设置浮动,就变成了块级标签. 1.3 关于浮动的两个特点: 浮动 ...

  3. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  4. CSS clear 清除浮动,兼容各浏览器

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

  5. div clear清除浮动产生的影响 被受影响的div加上清除浮动后 不会填充前一个div浮动后空出的位置

  6. 清除浮动(overflow、clear、:after等方法)

    元素在浮动之后有三个重要的特点: 脱离文档流. 向左/向右浮动直到遇到父元素或者别的浮动元素. 浮动会导致父元素高度坍塌.  解决父元素高度坍塌的方式就是清除浮动. 以下述代码为例: <styl ...

  7. [转]CSS clear both清除浮动

    DIV+CSS clear both清除产生浮动 我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习cs ...

  8. 【css】清除浮动(clearfix 和 clear)的用法

    本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...

  9. CSS clear both清除浮动总结

    我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...

随机推荐

  1. tensorflow: a Implementation of rotation ops (旋转的函数实现方法)

    tensorflow 旋转矩阵的函数实现方法 关键字: rot90, tensorflow 1. 背景 在做数据增强的操作过程中, 很多情况需要对图像旋转和平移等操作, 针对一些特殊的卷积(garbo ...

  2. 微信小程序支付返回信息为空

    1.昨天公司说要实现微信小程序的支付,于是看了下微信小程序的开发api文档,和之前的app  端以及pc端基本相似:于是让他们把参数改了下,把之前的trade_type 由 app 改成 小程序要求的 ...

  3. Atlas+Keepalived实现MySQL读写分离、读负载均衡

    一.基础介绍 ========================================================================================== 1. ...

  4. Connection Manager ->> Multiple Flat File Connection & Multiple File Connection

    遍历一个文件夹下的所有文件的方法有两钟:1)使用Multiple Flat File Connection,把所有我们要的文件用"|"作为连接符拼凑出一条connection st ...

  5. IONIC屏幕方向锁定

    如果希望阻止app在设备旋转时发生横屏,可以使用这个插件: cordova plugin add cordova-plugin-screen-orientation // set to either ...

  6. ELK_Elastic Search和kibana版本对应关系

    https://www.elastic.co/downloads/past-releases/kibana-5-0-0 https://www.elastic.co/downloads/past-re ...

  7. ES6 Map遍历、filter()筛选对象

    目录: -------- 1.map() -------- 2.filter(): ------------- 2.1.filter函数可以看成是一个过滤函数,返回符合条件的元素的数组 ------- ...

  8. HDU 3420 -- Bus Fair ACM

    Bus Fair Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  9. TortoiseGit基本操作

    使用之前需要下载git for windows,tortoisegit . 1.TortoiseGit使用与操作 1.1克隆 打开一个要存放项目的文件夹下,右键Git Clone...进行克隆 弹出克 ...

  10. 【深入理解JAVA虚拟机】第4部分.程序编译与代码优化.2.运行期优化。这章提到的具体的优化技术,应该对以后做性能工作会有帮助。

    1.概述 Java程序最初是通过解释器(Interpreter)进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁时,就会把这些代码认定为“热点代码”(Hot Spot Code). 为了提高 ...