清除浮动,浮动元素的高度自适应问题
2015-03-06 13:29
302 查看
一、问题
当有时不浮动的父元素装载着浮动的子元素时,这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大。比如截图的第一行图,上面一条黑色的粗线,就是父div的边框(为了看效果,我设置了父div的border:5px。左右两边是各浮动一个div)。
于是乎,我想解决这个父元素高度不会跟随着子元素的内容而变化的问题。谷歌了一下,找到答案
二、解决方法
参考来源:http://www.ruanyifeng.com/blog/2009/04/float_clearing.html
里面提到了四种方法,分别对应下面这张图的第2、3、4、5行的图。并且这是在IE6、7浏览器下的截图,说明能很好的兼容在IE低版本浏览器。
法一:添加空元素
直接在浮动的子元素下添加一个非浮动的空元素。原因是父元素肯定会考虑非浮动元素的位置,非浮动的空元素又是放在浮动元素的下面,所以父元素的高度就被撑开了。
1、 不好的地方就是添加了冗余代码,违背语义化的标准,特别是现在提倡语义化,article、footer、header都使用具有语义化的标签来写。
2、但是,这是一种我喜欢的方法,直接添加非浮动的子元素,简单。另外一种我比较喜欢的方法就是使用clear:both,好吧,原谅我这么土,喜欢用这个方法,因为我觉得够easy,又能做到兼容。
法二:父元素设置为浮动
父元素带着子元素一起浮动,duang~
法三:浮动元素的自动清除
设置父元素的一个css样式。overflow:hidden
法四:通过css添加子元素
如果为了满足语义化、不添加冗余代码,就使用方法四。
关于浮动元素的clearing问题,就解决了
当有时不浮动的父元素装载着浮动的子元素时,这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大。比如截图的第一行图,上面一条黑色的粗线,就是父div的边框(为了看效果,我设置了父div的border:5px。左右两边是各浮动一个div)。
于是乎,我想解决这个父元素高度不会跟随着子元素的内容而变化的问题。谷歌了一下,找到答案
二、解决方法
参考来源:http://www.ruanyifeng.com/blog/2009/04/float_clearing.html
里面提到了四种方法,分别对应下面这张图的第2、3、4、5行的图。并且这是在IE6、7浏览器下的截图,说明能很好的兼容在IE低版本浏览器。
法一:添加空元素
直接在浮动的子元素下添加一个非浮动的空元素。原因是父元素肯定会考虑非浮动元素的位置,非浮动的空元素又是放在浮动元素的下面,所以父元素的高度就被撑开了。
1、 不好的地方就是添加了冗余代码,违背语义化的标准,特别是现在提倡语义化,article、footer、header都使用具有语义化的标签来写。
2、但是,这是一种我喜欢的方法,直接添加非浮动的子元素,简单。另外一种我比较喜欢的方法就是使用clear:both,好吧,原谅我这么土,喜欢用这个方法,因为我觉得够easy,又能做到兼容。
<!-- 法1 下方添加空元素 --> <p>添加空元素</p> <div style="border:5px solid #000;"> <div style="float:left;width:45%;height:100px;background:#ccc"></div> <div style="float:right;width:45%;height:100px;background:#000"></div> <div style="clear:both"></div> </div>
法二:父元素设置为浮动
父元素带着子元素一起浮动,duang~
<!-- 法2 父元素也设置为浮动元素 --> <p>父元素设置为浮动</p> <div style="border:5px solid #000;float:left;width:100%;"> <div style="float:left;width:45%;height:100px;background:#ccc"></div> <div style="float:right;width:45%;height:100px;background:#000"></div> </div>
法三:浮动元素的自动清除
设置父元素的一个css样式。overflow:hidden
<!-- 法3 浮动元素的自动clearing --> <p>浮动元素的自动clearing</p> <div style="border:5px solid #000;width:100%;overflow:hidden"> <div style="float:left;width:45%;height:100px;background:#ccc"></div> <div style="float:right;width:45%;height:100px;background:#000"></div> </div>
法四:通过css添加子元素
<!-- 法4 通过css添加子元素 --> <p>通过css添加子元素</p> <div style="border:5px solid #000;width:100%;" class="clearfix"> <div style="float:left;width:45%;height:100px;background:#ccc"></div> <div style="float:right;width:45%;height:100px;background:#000"></div> </div> /* css样式 */ .clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; // 触发IE的hasLayout属性,该属性IE独有 }
如果为了满足语义化、不添加冗余代码,就使用方法四。
关于浮动元素的clearing问题,就解决了
相关文章推荐
- overflow:auto;子元素浮动后父容器高度自适应问题
- 父元素的高度为0利用伪元素:after清除浮动可解决问题
- 清除浮动-解决父级元素高度不能适应子级元素高度的问题
- 解决float浮动带来的父元素高度没有的问题---清除浮动
- 三种方法解决浮动元素父容器高度自适应问题
- 如何清除浮动元素对父元素高度的影响 & 如何解决外边距溢出问题
- 父元素高度自适应,子元素浮动,引起的高度塌陷问题
- 解决浮动元素父容器高度自适应问题
- overflow:auto;子元素浮动后父容器高度自适应问题
- 三种方法解决浮动元素父容器高度自适应问题
- 块级元素的高度自适应问题
- 如何让内部的带浮动元素的div自适应高度
- 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
- overflow解决float浮动后高度自适应问题
- 手机网站自适应无高度情况下浮动元素背景如何显示
- 解决子块Float浮动后,父块高度自适应问题
- 关于自适应屏幕,设置子元素浮动,父div不能包裹子div,子元素中内容溢出的问题。
- 利用overflow属性解决子元素float浮动后父级元素高度无法自适应的问题
- css实际技巧---父div中有浮动的子div,父容器不能自适应高度,清除浮动,父容器自适应高度
- 解决高度塌陷的问题 – 清除浮动