css中清除浮动的主要方法
2016-06-03 20:33
585 查看
工作中因需要我们经常设置元素float,导致其脱离标准文档流,因此会对其父元素或兄弟元素产生影响。为了消除浮
动带来的影响,下面总结几种常用的清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下。
1、父级div定义 height ,代码如下:
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握 。
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 。
建议:不推荐使用,只建议高度固定的布局时使用 。
2、结尾处加空div标签 clear:both ,代码如下:
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3、父级div定义 伪类:after 和 zoom ,代码如下:
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
4、父级div定义 overflow:hidden ,代码如下:
优点:简单、代码少、浏览器支持好 。
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5、父级div定义 overflow:auto ,代码如下:
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度。
优点:简单、代码少、浏览器支持好 。
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
动带来的影响,下面总结几种常用的清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下。
1、父级div定义 height ,代码如下:
<style type="text/css"> .div1{ background:#000080; border:1px solid red; height:200px; <span style="color:#ff0000;">/*解决代码*/</span> } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98%; } .left{ float:left; width:20%; height:200px; background:#DDD; } .right{ float:right; width:30%; height:80px; background:#DDD; } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"></div>
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握 。
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题 。
建议:不推荐使用,只建议高度固定的布局时使用 。
2、结尾处加空div标签 clear:both ,代码如下:
<style type="text/css"> .div1{ background:#000080; border: 1px solid red; } .clear{ clear: both; <span style="color:#ff0000;">/*解决代码*/</span> } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98%; } .left{ float:left; width:20%; height:200px; background:#DDD; } .right{ float:right; width:30%; height:80px; background:#DDD; } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clear"></div> </div> <div class="div2"> div2 </div>原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
3、父级div定义 伪类:after 和 zoom ,代码如下:
<style type="text/css"> .div1{ background:#000080; border:1px solid red; } .clear:after{ /* display: block; * clear: both; * content: ""; <span style="color:#ff0000;">解</span> visibility: hidden; <span style="color:#ff0000;">决</span> height: 0; <span style="color:#ff0000;">代</span> } <span style="color:#ff0000;">码</span> .clear{ * zoom: 1; * } */ .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98%; } .left{ float:left; width:20%; height:200px; background:#DDD; } .right{ float:right; width:30%; height:80px; background:#DDD; } </style> <div class="div1 clear"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
4、父级div定义 overflow:hidden ,代码如下:
<style type="text/css"> .div1{ background:#000080; border:1px solid red; width: 98%; overflow: hidden; <span style="color:#ff0000;">/*解决代码*/</span> } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98%; } .left{ float:left; width:20%; height:200px; background:#DDD; } .right{ float:right; width:30%; height:80px; background:#DDD; } </style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div>原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度 。
优点:简单、代码少、浏览器支持好 。
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
5、父级div定义 overflow:auto ,代码如下:
<span style="font-size:14px;"><style type="text/css"> <span style="white-space:pre"> </span> .div1{ background:#000080; border:1px solid red; width:98%; overflow:auto; <span style="color:#ff0000;">/*解决代码*/</span> } .div2{ background:#800080; border:1px solid red; height:100px; margin-top:10px; width:98%; } .left{ float:left; width:20%; height:200px; background:#DDD; } .right{ float:right; width:30%; height:80px; background:#DDD; } <span style="white-space:pre"> </span></style> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> </div> <div class="div2"> div2 </div> </span>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度。
优点:简单、代码少、浏览器支持好 。
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
相关文章推荐
- css固定元素位置(fixed)
- CSS——盒子模型
- CSS3:border-radius
- Reset css
- sublime中将less编译成css的插件less2css
- css3 转换transfrom 过渡transition 和两个@
- div,css,js样式
- css3 resize box-sizing outline-offset
- 6-常见样式:单位值种类、颜色值模式、背景图片、平铺、背景定位
- CSS3之ToolTip------飞入动画提示框
- CSS3 filter 实现滤镜效果
- 编写高效的CSS选择符
- css设置各种中文字体如雅黑、黑体、宋体、楷体等等(未)
- 欢迎使用CSDN-markdown编辑器
- 溢出文字处理CSS属性——text-overflow、word-break、word-wrap和white-space
- js重写alert样式
- 很不错的CSS样式
- CSS list-style 属性
- textarea无边框文本透明背景文本样式
- 当我们在使用CSS的时候ID与Class有何不同?