常用的清除浮动方式
2017-05-18 23:40
141 查看
1.添加一个新元素,添加一个div块,设置clear:both;同时不让它显示
2.给父元素添加overflow: hidden;当父层没有设置浮动,而子层设置了浮动时,父层很大可能受到浮动的影响缩成一条,这时使用clear: both;清除浮动是没有效果的,应该使用overflow: hidden;
3.最常用的一种方式,在浮动元素的父元素添加:after伪类。这种方法清除浮动是现在网上最拉风的一种清除浮动,它是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html中插入一个div.clear标签,而此方法利用其父元素伪类clear:after在元素内部增加一个类似于div.clear的效果。
.clear { clear: both; font-size: 0; height: 0; line-height: 0; }
2.给父元素添加overflow: hidden;当父层没有设置浮动,而子层设置了浮动时,父层很大可能受到浮动的影响缩成一条,这时使用clear: both;清除浮动是没有效果的,应该使用overflow: hidden;
.over-flow { overflow: hidden; zoom: 1; // 处理兼容问题 }
3.最常用的一种方式,在浮动元素的父元素添加:after伪类。这种方法清除浮动是现在网上最拉风的一种清除浮动,它是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。其实现原理类似于clear:both方法,只是区别在于:clear在html中插入一个div.clear标签,而此方法利用其父元素伪类clear:after在元素内部增加一个类似于div.clear的效果。
.outer {zoom:1;} /*==for IE6/7 ==*/ .outer :after { clear:both; // 清除所有浮动 content:'.'; display:block; width: 0; height: 0; visibility:hidden; // 允许浏览器渲染它,但是不显示出来 } /*==for FF/chrome/opera/IE8==*/
相关文章推荐
- CSS-21.清除浮动的常用方式(隔墙法)
- 清除浮动常用的几种方式
- css 清除浮动的两种常用方式
- CSS-23.清除浮动的常用方式(伪元素内墙)
- 页面布局中常用的清除浮动的方法
- 清除浮动的方式?
- HTML----css clear的理解,清除浮动方式
- 有关浮动和常用清除方法总结
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- 页面布局中常用的清除浮动的方法
- 有关浮动和常用清除方法总结
- CSS 清除浮动的几种方式
- 清除浮动的常用方法
- 【css】清除浮动的几种方式
- 清除浮动的方式
- 简洁的CSS清除浮动方式(支付宝就使用这样的方式)
- CSS清除浮动常用的三种方法
- 五种清除浮动的方式
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}