CSS清除浮动 - 段竹君_H5之家 - 中国HTML5教程资源分享第一站

CSS清楚浮动方法 1.给父级一个height属性

.div1 .div2 .left .rightLeftRight div2

原理：父级手动定义一个高度，就解决了父级div无法自动获取到高度的问题

优点：简单，代码量少。

缺点：只适合高度固定布局，要给出精确高度。

2.结尾加一个空div标签，给空div clear：both属性

.div1 .div2 .left .right .div --*清楚浮动用的空div*-- LeftRight div2

原理：前加一个空的div，利用clear：both清除浮动

有点：简单，代码量少，浏览器支持好

缺点：不容易理解，不利于布局

3.给父级定义一个伪类：after

.div1{ border background-color .div1:after{ content clear display .left{ width height float background-color .right{ width height float background-color .div2{ background-color border

原理：相当于给父级加一个子级（空的div，给clear：both属性，并且content必须有，尽管内容为空也得写）

优点：浏览器支持行好，不容易出现怪问题。

缺点：代码多，不容易被初学者理解

4.给父级定义 overflow:hidden

.div1{ border background-color overflow .left{ width height float background-color .right{ width height float background-color .div2{ background-color border

原理：必须定义宽度，同时不能定义高度，使用over：hidden浏览器自动检测浮动元素的高度

优点：代码量少

缺点：如果子级为定位元素，而且子级宽度大于父级时，多余的内容会被隐藏

5.给父级定义 overflow:auto

.div1{ border background-color overflow .left{ width height float background-color .right{ width height float background-color .div2{ background-color border

原理：必须定义宽度，同时不能定义高度，使用over：auto浏览器自动检测浮动元素的高度

优点：代码量少

缺点：如果子级宽度大于父级时，多余的内容会被隐藏