清除浮动的几种方式和兼容性处理

在清除浮动前我们要了解两个重要的定义:

浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)

知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了,这时候我们就需要用到清除浮动的属性clear, 
clear:left | right | both | none | inherit:元素的某个方向上不能有浮动元素 
clear:both:在左右两侧均不允许浮动元素。

需要注意的东西:

after伪类: 元素内部末尾添加内容;

:after{content"添加的内容";} IE6,7下不兼容

zoom 缩放

1.zoom在非IE浏览器中表现为支持放大或者缩小,但是由于这个属性是一个不标准的css属性,因此一般在非IE浏览器中不用zoom来实现div 的缩放效果,现在要放大或者缩小

直接用css3的transform属性。zoom:2;放到为原来2倍。

2.触发IE浏览器的haslayout ,解决ie下的浮动,margin重叠等一些问题。

a、触发 IE下 haslayout,使元素根据自身内容计算宽高。

b、FF 不支持;

1,父级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不一样时,会产生问题 
建议:不推荐使用,只建议高度固定的布局时使用

2,在浮动元素下方添加空div,并添加样式clear:both;height:0;overflow:hidden;

<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;height:0;overflow:hidden;} </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定义 伪类: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代码。

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 
建议:不推荐使用,只作了解。

原文地址:https://www.cnblogs.com/susan-home/p/8761804.html

时间: 2024-11-07 20:06:33

清除浮动的几种方式和兼容性处理的相关文章

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

html 清除浮动的几种方式

清除浮动的几种方式? 答:1,父级 div 定义 height 原理:父级 div 手动定义height,就解决了父级 div 无法自动获取到高度的问题. 简单.代码少.容易掌握 ,但 只适合高度固定的布局. 2,结尾处加空 div 标签 clear:both 原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获 取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感觉很不好 . 3,父级 div 定义 伪类:

清除浮动的四种方式及其原理理解

清除浮动的四种方式及其原理理解 本文介绍了四种清除浮动的方法,并尝试解释其原理.在理解了各种清除浮动的原理之后,你会发现,很多清除浮动的方法本质上其实是一样的.掌握这些原理,相信你可以根据场景和需求,灵活运用原则发展出不同的清除浮动的方法,而不再死记或拘泥于文中提到的方法. 一.为什么要清除浮动 在讲清除浮动的方法之前,我们先来了解一下为什么要清除浮动,清除浮动的目的是什么,即,要解决什么样的问题.来看一个浮动的例子(略去了文字内容): <div class="topDiv"&g

CSS 清除浮动的几种方式

第一种方式: 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <div class="news"> <img src="/img/news-pic.jgp" alt="my pic" /> &l

css_清除浮动的4种方式

浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流,新的东西好用,兼容不太好.IE10以下不兼容flex布局. float布局会脱离文档流,对页面的布局造成影响,比如造成父级的高度坍塌等问题.清除浮动后,便不会影响文档流.下面介绍一下现在清除浮动的一些方式. 一.父级添加overflow: hidden: 子元素浮动了,会造成父元素的高度坍塌.只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响. <ul cla

清除浮动的几种方式

最近来了个小徒弟,总是被浮动的盒子整蒙圈了,作为小师父的我就给他梳理一下: 浮动就是页面布局中是某些盒子添加了float:left 或float:right的类名或属性.其具有以下特点: 浮动的元素会脱离标准流: 浮动后的元素会覆盖标准流的元素: 浮动规则:浮动找浮动,不浮动找不浮动: 浮动显示的位置与原本不浮动的位置是对应的: 浮动的元素会影响下面的元素: 浮动的元素会改变显示方式(行内块级元素): a) 不管元素是行内元素还是块级元素都会在同一行显示: b) 浮动后的元素可以设置宽高: 例:

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

css清除浮动的两种方式(clearfix和clear)

最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都没清除浮动,导致经常会有div包不住子级的东西(经常一审查height=0).现利用两例子来巩固下. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响 方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父