CSS清除浮动的八种方法

原创 2018年04月17日 10:49:32

浮动对页面的影响

如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0。
由于父盒子的高度为0,下面的元素会自动补位,所以这个时候要进行浮动的清除。

这里写图片描述

CSS浮动详见 http://www.w3school.com.cn/css/css_positioning_floating.asp

清除浮动的方法

1.父级div定义 height

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

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

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度。
优点:简单、代码少、浏览器支持好。
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div。
建议:此方法是以前主要使用的一种清除浮动方法。

3.父级div定义 伪类:after 和 zoom

**原理:**IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题。
优点:浏览器支持好(目前大型网站都有使用,如:腾迅,网易,新浪等等) 。
缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。

4.父级div定义 overflow:hidden

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度。
优点:简单、代码少、浏览器支持好。
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5.父级div定义 overflow:auto

原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度。
优点:简单、代码少、浏览器支持好。
缺点:内部宽高超过父级div时,会出现滚动条。
建议:如果需要出现滚动条或者确保代码不会出现滚动条可使用。

6.父级div 也一起浮动

原理:所有代码一起浮动,就变成了一个整体。
缺点:会产生新的浮动问题。
建议:不推荐使用,只作了解。

7.父级div定义 display:table

原理:将div属性变成表格。
缺点:会产生新的未知问题。
建议:不推荐使用,只作了解。

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

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

更多内容,欢迎关注微信公众号“让知识成为资产”。

裸板调试方法合集

-
  • 1970年01月01日 08:00

CSS清除浮动的五种方式

浮动元素会影响整体的布局,但是有些情况又不得不让元素浮动来更好的构成页面,下面整理五种常用的清楚浮动的方法: (注:为了节省时间,将方法写在了class名内,看懂即可) 1,为父元素添加高度: ...
  • Manson_zh
  • Manson_zh
  • 2017-07-04 15:33:07
  • 584

css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016-10-09 23:04:14
  • 20460

CSS—清除浮动的几种方式

什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版。浮动只有左右浮动。 2--浮动元素A的位置与上一个元素有关系。如果上一个元素有浮动,则A的顶...
  • nongweiyilady
  • nongweiyilady
  • 2016-12-26 17:11:29
  • 2890

CSS清除浮动的几种方法

浮动的几个重要性质首先,浮动有几个很重要的性质 脱标:脱离标准文档流 贴边(浮动会紧贴着浮动方向的边 字围(浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动...
  • u011342403
  • u011342403
  • 2017-04-24 06:49:22
  • 906

CSS基础(一)清除浮动的几种方法

块级元素和行内元素 块级元素 盒子会扩展到与父元素同宽 明确设定 width 属性后,块级元素就不会再扩展到与父元素(即 body)同宽了。 可以设定宽高。 前后会换行 常见:DIV, FOR...
  • m0_37343248
  • m0_37343248
  • 2017-03-12 19:57:20
  • 251

CSS四种清除浮动的方法

浮动能让元素脱标,但是不同区域的标签之间却又会贴边,比如: Document ...
  • Jeff169
  • Jeff169
  • 2016-12-07 16:33:48
  • 686

CSS清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

CSS清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法  浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别...
  • sinat_36533893
  • sinat_36533893
  • 2017-04-08 14:35:07
  • 685

Html+CSS CSS(CSS3) 3种清除浮动的方法

应用DivCSS网页布局,经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。 下面看今天的...
  • u010003835
  • u010003835
  • 2016-03-22 16:39:43
  • 1590

CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动?我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上。 在 CSS...
  • zengyonglan
  • zengyonglan
  • 2016-11-23 14:09:56
  • 3766
收藏助手
不良信息举报
您举报文章:CSS清除浮动的八种方法
举报原因:
原因补充:

(最多只允许输入30个字)