几种常用的清除浮动方法(一)

From: https://www.cnblogs.com/nxl0908/p/7245460.html

1、父级div定义伪类：after和zoom

<style type="text/css"> .div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}</style>
<div class="div1 clearfloat">
<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代码
评分：★★★★☆

2.在结尾处添加空div标签clear:both

<style type="text/css"> .div1{background:#000080;border:1px solid red}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat{clear:both}</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不爽
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
评分：★★★☆☆

3.父级div定义height

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.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>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：简单，代码少，容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
评分：★★☆☆☆

4.父级div定义overflow:hidden

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}.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

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}.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:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
评分：★★☆☆☆

6.父级div也一起浮动

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}.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>

原理：所有代码一起浮动，就变成了一个整体
优点：没有优点
缺点：会产生新的浮动问题。
建议：不推荐使用，只作了解。
评分：★☆☆☆☆

7.父级div定义display:table

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}.div2{background:#800080;border:1px solid red;height:100px;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>

原理：将div属性变成表格
优点：没有优点
缺点：会产生新的未知问题
建议：不推荐使用，只作了解
评分：★☆☆☆☆

8、结尾处加br标签clear:both

<style type="text/css"> .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}.div2{background:#800080;border:1px solid red;height:100px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}.clearfloat{clear:both}</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">div2</div>

原理：父级div定义zoom:1来解决IE浮动问题，结尾处加br标签clear:both
建议：不推荐使用，只作了解
评分：★☆☆☆☆

几种常用的清除浮动方法(一)相关推荐

现在比较流行的一种新的清除浮动的方法
清除浮动的方法一般有很多种,我们都是根据实际情况或者自己的习惯来清除浮动,最近发现一种比较常用的清除浮动的方法: .cf:before, .cf:after {content: " &quo ...
常用的清除浮动的方法
清除浮动在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢 ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
计算机中十二种常用密码的破解方法(转)
计算机中十二种常用密码的破解方法(转)[@more@] 在日常操作中,我们经常要输入各种各样的密码,例如开机时要输入密码,QQ时也要先输入密码,假如你忘记了这些密码,就有可能用不了机器.打不开文件.不 ...
「CSS」常见的清除浮动方法
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素,浮动元素会造成父元素高度塌陷,所以当我们设置float后,需进行相应的清除浮动操作. 方法一:创建B ...
几种常用的像素混合方法
前两天为大家介绍了处理透明光影效果的 Alpha-Blending 技术,今次我将再为大家介绍其它几种常用的像素混合方法,这些方法一般在游戏中被用来处理光影效果. 『Alpha-Blending』前 ...
10种常用的网络营销方法
网络营销产生于20世纪90年代,发展至今已演变出越来越多的营销方法,在国内随着互联网影响的进一步扩大,人们对网络营销认知的进一步加深,网络营销方法手段也是各种推陈出新,下面就介绍如今网络营销最常用的1 ...
**10种常用的网络营销方法**
**10种常用的网络营销方法** 网络营销产生于20世纪90年代,发展至今已演变出越来越多的营销方法,在国内随着互联网影响的进一步扩大,人们对网络营销认知的进一步加深,网络营销方法手段也是各种推陈出新 ...
特征工程：8种常用类别型数据处理方法
8种常用类别型数据处理方法

几种常用的清除浮动方法(一)

1、父级div定义伪类：after和zoom

2.在结尾处添加空div标签clear:both

3.父级div定义height

4.父级div定义overflow:hidden

5.父级div定义overflow:auto

6.父级div也一起浮动

7.父级div定义display:table

8、结尾处加br标签clear:both

几种常用的清除浮动方法(一)相关推荐

最新文章

热门文章