联盟设计库,杭州做seo的公司,交互效果好的移动端网站,威海seo公司清除浮动方法解析 清除浮动带来的额外影响 如果对于浮动不熟悉的同学#xff0c;可以看看介绍float的文章。传送门#xff1a;CSS float 我们知道#xff0c;在一个父元素内如果遇到某个浮动元素#xff0c;此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题#xff…清除浮动方法解析 清除浮动带来的额外影响 如果对于浮动不熟悉的同学可以看看介绍float的文章。传送门CSS float 我们知道在一个父元素内如果遇到某个浮动元素此时父元素的高度会发生塌陷。针对父元素高度塌陷的问题现在已经有了很多的解决方案。针对每一个方案我们来进行深度的剖析。 添加空块级元素 这种方法比较容易但是要注意的是这个空元素必须是一个块级元素不能是行内元素或者是行内块元素。缺点就是多了一些没有意义的标签。代码如下。 //HTML div classcontent div classfloat /div div classclearfix/div //用于清除浮动的元素必须是块级元素 /div //CSS .content { background:pink; } .clearfix { clear: both; } .float { width: 50px; height: 50px; float: left; background: tan; } 之所以可以使用clear属性清除浮动带来的额外影响还要回归clear属性的本质。 clear属性规定元素的哪一侧不允许其他浮动元素。 本质在CSS2.1中clear属性会给清除元素即设置了clear属性的元素的上外边距之上添加清除空间而元素本身的外边距并不改变。再说的详细一些也就是给元素设置clear:left|right|both时会使清除元素的上外边距边界刚好在该边上浮动元素的下外边距边界之下。 overflow 在父元素中设置overflow:hidden|auto|scroll可以解决父元素高度塌陷的问题。为什么可以通过overflow来解决父元素高度塌陷的问题这里涉及到了另外一个知识点也就是BFC块级格式化上下文先看解决方法。原理下篇文章分享。 父元素设置: overflow:hidden|auto; 下面是设置overflow前和overflow后的效果图 :after伪元素 在父元素上增加:after伪元素可以解决父元素高度塌陷的问题。 //HTML div classcontent div classfloat /div p会给覆盖吗/p /div //CSS .content { background: tan; :after { content: .; display: block; clear: both; height: 0; visibility: hidden; } } .float { width: 100px; height: 100px; float: left; background: olive; } 放到浏览器上父元素高度正常显示。 要理解伪元素解决父元素高度塌陷的方案需要知道额外的一些知识。 浮动 当某个元素发生浮动(left || right)时该元素会脱离普通文档流。当某个元素发生浮动并且DOM后面的元素没有文本内容时此时浮动元素会覆盖掉紧跟其后的元素。当某个元素发生浮动并且DOM后面的元素具有文本内容时此时浮动元素同样会覆盖掉紧跟其后的元素但是文字环绕在float元素周围显示而不是被覆盖。 什么意思呢其实仔细思考还是挺好理解的。这里放上一段代码解释前三点。 //HTML与上面的相同将div换成了spanclass换成了float-inline。 //CSS .float-inline { float:left; width:100px; height:100px; background:pink; } 相应的效果如下。 此时可以设置宽高说明了内联元素span的行内框变成了块框。同时在浮动元素同级的下一个元素是具有文本内容的此时文字就会环绕在float元素的周围。因为浮动元素的存在父元素高度塌陷了。 伪元素 伪元素顾名思义是一个在某个元素之后添加内容。 伪元素内容的添加必须放在content属性里面。伪元素是行内元素不过可以通过display改变伪元素的框的类型。 ok到这里。我们就已经掌握了理解:after伪元素清除浮动所需要的知识了。放上解决方案。按顺序剖析。 .clearfix: { zoom:1 } //触发IE的haslayout. .clearfix:after { content: .; display: block; clear: both; height: 0; visibility: hidden; } 设置伪元素的内容为.content的内容放什么都可以。设置height:0;设置visibility:hidden。这里是要让content隐藏掉。设置clear:both。 清除伪元素的两侧都不允许出现浮动。最重要的是设置display属性为block并且只能是block不能是inline-block。前面也说过伪元素是行内元素行内元素是无法设置宽高的。设置display:block此时元素可以设置宽高将height:0此时元素不占据任何高度。如果只设置了前四个属性而没有改变伪元素的display将会没有效果。 这里介绍了三种清除浮动带来的额外影响的三种方法这里所说的额外影响指的是浮动元素给兄弟元素和父元素带来的影响。这里做一个小小的总结 添加空div和:after伪元素的有一个共同的思想就是使用clear属性。clear属性会给清除元素即设置了clear属性的元素的上外边距之上增加清除空间而元素本身外边距并不改变。并且会使清除元素的上外边距的边界刚好在浮动元素的下外边距边界之下。所以才能达到清除浮动带来额外影响的效果。父元素使用overflow不为visible也就是设置overflow:hidden|auto此时也可以达到清除浮动的效果。这里涉及到BFC的概念下一篇文章分享。 - 此文章转载-转载自:http://www.cnblogs.com/Uncle-Keith/p/6082667.html
