We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
本文的框架图如下:
W3school中给出的浮动定义为浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的特点,可以用八个字总结:脱标、贴边、字围和收缩。
为了更好说明,请看下图: 当框 1 向左浮动时,它脱离文档流(脱标)并且向左移动(贴边),直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果框2中有文字,就会围着框1排开(字围)。
如果把所有三个框都向左浮动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。 下面着重讲解下第四个特点--收缩
一个浮动的内联元素(比如span img标签)不需要设置display:block就可以设置宽度。
<style> div{ float: left; background-color: greenyellow; } </style> </head> <body> <div> 这是一段文字 </div> </body>
得到以下的效果: 我们都知道div标签是块级元素,会独占一行,然而上面的例子中将div设置为左浮后,其宽度不再是占满一行,而是收紧为内部元素的宽度,这就是浮动第四个特征的含义。
先看下面这段代码:
<style> .parent{ border: solid 5px; width:300px; } .child:nth-child(1){ height: 100px; width: 100px; background-color: yellow; float: left; } .child:nth-child(2){ height: 100px; width: 100px; background-color: red; float: left; } .child:nth-child(3){ height: 100px; width: 100px; background-color: greenyellow; float: left; } </style> </head> <body> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> </body>
我们想让父容器包裹着三个浮动元素,然而事与愿违,得到却是这样的结果: 这就是浮动带来副作用----父容器高度塌陷,于是清理浮动就显着至关重要。
清除浮动不是不用浮动,清除浮动产生的父容器高度塌陷。
如果一个元素要浮动,那么它的父元素一定要有高度。高度的盒子,才能关住浮动。可以通过直接给父元素设置height,实际应用中我们不大可能给所有的盒子加高度,不仅麻烦,并且不能适应页面的快速变化;另外一种,父容器的高度可以通过内容撑开(比如img图片),实际当中此方法用的比较多。
在最后一个子元素新添加最后一个冗余元素,然后将其设置clear:both,这样就可以清除浮动。这里强调一点,即在父级元素末尾添加的元素必须是一个块级元素,否则无法撑起父级元素高度。
<div id="wrap"> <div id="inner"></div> <div style="clear: both;"></div> </div>
#wrap{ border: 1px solid; } #inner{ float: left; width: 200px; height: 200px; background: pink; }
上面那种办法固然可以清除浮动,但是我们不想在页面中添加这些没有意义的冗余元素,此时如何清除浮动吗? 结合 :after 伪元素和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
<div id="wrap" class="clearfix"> <div id="inner"></div> </div>
#wrap { border: 1px solid; } #inner { float: left; width: 200px; height: 200px; background: pink; } /*开启haslayout*/ .clearfix { *zoom: 1; } /*ie6 7 不支持伪元素*/ .clearfix:after { content: ''; display: block; clear: both; height:0; line-height:0; visibility:hidden;//允许浏览器渲染它,但是不显示出来 }
给浮动元素的父容器添加一个clearfix的class,然后给这个class添加一个:after伪元素,实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案,推荐使用
这种方案让父容器形成了BFC(块级格式上下文),而BFC可以包含浮动,通常用来解决浮动父元素高度坍塌的问题。
BFC的触发方式
我们可以给父元素添加以下属性来触发BFC:
float 为 left | right
overflow 为 hidden | auto | scorll
display 为 table-cell | table-caption | inline-block
position 为 absolute | fixed
这里可以给父元素设置overflow:auto,但是为了兼容IE最好使用overflow:hidden。
但这种办法有个缺陷:如果有内容出了盒子,用这种方法就会把多的部分裁切掉,所以这时候不能使用。
BFC的主要特征:
BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
BFC不会重叠浮动元素
BFC可以包含浮动,这可以清除浮动。
br标签存在一个属性:clear。这个属性就是能够清除浮动的利器,在br标签中设置属性clear,并赋值all。即能清除掉浮动。
<div id="wrap"> <div id="inner"></div> <br clear="all" /> </div>
#wrap { border: 1px solid; } #inner { float: left; width: 200px; height: 200px; background: pink; }
The text was updated successfully, but these errors were encountered:
大佬,最近在看你的博客写的很棒 双伪元素清除浮动我也觉得不错呢
Sorry, something went wrong.
No branches or pull requests
本文概述
本文的框架图如下:
一、浮动到底是什么?
W3school中给出的浮动定义为浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框脱离文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
![css浮动](https://camo.githubusercontent.com/4e8435a40c103b447f127cfe5e4b2bce460920537f1d0f96907b59c5f3e8f186/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f392f342f313635613532323131313662363536643f773d39333826683d31373726663d706e6726733d3339333839)
二、浮动有什么特点?
浮动的特点,可以用八个字总结:脱标、贴边、字围和收缩。
为了更好说明,请看下图:
当框 1 向左浮动时,它脱离文档流(脱标)并且向左移动(贴边),直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果框2中有文字,就会围着框1排开(字围)。
如果把所有三个框都向左浮动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
![CSS 浮动实例 - 向左浮动的元素](https://camo.githubusercontent.com/03f4c620d4ad57d22054ed83b8f6e1419eefa9597d47fe5e590e5faf1ade66cb/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f392f342f313635613532323131313631333263663f773d35323626683d32333326663d67696626733d34393033)
下面着重讲解下第四个特点--收缩
一个浮动的内联元素(比如span img标签)不需要设置display:block就可以设置宽度。
得到以下的效果:
![](https://camo.githubusercontent.com/19f20d65b7402c67e28eb15227d9cd954c8780ed07fd2747ae562af4000c0317/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f392f342f313635613532323131313930366239633f773d39363026683d353126663d706e6726733d373536)
我们都知道div标签是块级元素,会独占一行,然而上面的例子中将div设置为左浮后,其宽度不再是占满一行,而是收紧为内部元素的宽度,这就是浮动第四个特征的含义。
三、浮动有什么缺点?
先看下面这段代码:
我们想让父容器包裹着三个浮动元素,然而事与愿违,得到却是这样的结果:
![父容器高度塌陷](https://camo.githubusercontent.com/4a6130bddbd7bd98948e644e05d8af6fab5322a0e6e0ccfe87b340138e5fc06e/68747470733a2f2f757365722d676f6c642d63646e2e786974752e696f2f323031382f392f342f313635613532323131313535323634613f773d33323626683d31313726663d706e6726733d333236)
这就是浮动带来副作用----父容器高度塌陷,于是清理浮动就显着至关重要。
四、如何清理浮动?
清除浮动不是不用浮动,清除浮动产生的父容器高度塌陷。
套路1:给浮动元素的父元素添加高度(扩展性不好)
如果一个元素要浮动,那么它的父元素一定要有高度。高度的盒子,才能关住浮动。可以通过直接给父元素设置height,实际应用中我们不大可能给所有的盒子加高度,不仅麻烦,并且不能适应页面的快速变化;另外一种,父容器的高度可以通过内容撑开(比如img图片),实际当中此方法用的比较多。
套路2:clear:both;
在最后一个子元素新添加最后一个冗余元素,然后将其设置clear:both,这样就可以清除浮动。这里强调一点,即在父级元素末尾添加的元素必须是一个块级元素,否则无法撑起父级元素高度。
套路3:伪元素清除浮动
上面那种办法固然可以清除浮动,但是我们不想在页面中添加这些没有意义的冗余元素,此时如何清除浮动吗?
结合 :after 伪元素和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。
给浮动元素的父容器添加一个clearfix的class,然后给这个class添加一个:after伪元素,实现元素末尾添加一个看不见的块元素来清理浮动。这是通用的清理浮动方案,推荐使用
套路4:给父元素使用overflow:hidden;
这种方案让父容器形成了BFC(块级格式上下文),而BFC可以包含浮动,通常用来解决浮动父元素高度坍塌的问题。
BFC的触发方式
我们可以给父元素添加以下属性来触发BFC:
float 为 left | right
overflow 为 hidden | auto | scorll
display 为 table-cell | table-caption | inline-block
position 为 absolute | fixed
这里可以给父元素设置overflow:auto,但是为了兼容IE最好使用overflow:hidden。
但这种办法有个缺陷:如果有内容出了盒子,用这种方法就会把多的部分裁切掉,所以这时候不能使用。
BFC的主要特征:
BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。
BFC不会重叠浮动元素
BFC可以包含浮动,这可以清除浮动。
套路5:br标签清浮动
br标签存在一个属性:clear。这个属性就是能够清除浮动的利器,在br标签中设置属性clear,并赋值all。即能清除掉浮动。
参考文章
The text was updated successfully, but these errors were encountered: