浅谈 CSS 清除浮动的6种方法_html/css_WEB-ITnose
程序员文章站
2022-05-11 14:57:39
...
额外标签法
使用:after 伪元素
给父元素定高
利用overflow:hidden;属性
父元素浮动
父元素处于绝对定位
在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题
引出问题:
可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们,此刻只剩一条由上写边框贴合组成的线,同时 footer DIV元素也跑到了三个浮动元素的底下
解决办法:
1.使用额外标签发
这是早期普遍使用的方法,但是对于有代码洁癖的人来说,解决的不够完美
2.使用:after 为元素
3.给父元素定高
4.利用 overflow:hidden 属性
5.父元素浮动
当父元素浮动的时候,无需为子元素的浮动清除浮动,布局时经常用到
可以看出虽然 outer DIV 消除了塌陷现象,但由于其也发生了浮动故,其后元素若无处于正常文档流,会被跌在底下。
如果要解决可以参考前面的办法。
例如:
6.父元素处于绝对定位
与上一个方法同理,由于绝对定位已脱离正常文档流,故出现相同情况,解决办法依旧可以使用以上办法结合,灵活多变。
上一篇: python单例模式实例分析
推荐阅读
-
html清除浮动的6种方法示例
-
CSS 清除浮动的4种方法
-
看了很受益!提高网站可用性的6大原则_html/css_WEB-ITnose
-
清除浮动的疑问_html/css_WEB-ITnose
-
Foundation 6 – 先进的响应式的前端开发框架_html/css_WEB-ITnose
-
IE6bug及tab列表的切换_html/css_WEB-ITnose
-
问个关于浮动的问题_html/css_WEB-ITnose
-
去除IE6浏览器下获得焦点的元素的虚线框的两个小办法_html/css_WEB-ITnose
-
ie6下的span的高度问题,头疼_html/css_WEB-ITnose
-
问个关于浮动的问题_html/css_WEB-ITnose