CSS 清除浮动方法

最新推荐文章于 2024-09-05 04:25:37 发布

xingxingxingge

最新推荐文章于 2024-09-05 04:25:37 发布

阅读量128

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/xingxingxingge/article/details/88562290

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一：添加空元素
经典的解决方法，就是在浮动元素下方添加一个非浮动元素。

<div>
  <div style="float:left;width:45%;height:50px;"></div>
  <div style="float:right;width:45%;height:50px;"></div>
  <div style="clear:both;"></div>
</div>

clear参数值说明 none允许两边都可以有浮动对象 both不允许有浮动对象 left不允许左边有浮动对象 right不允许右边有浮动对象原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

二：浮动的父容器
另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。

<div style="float:left;">
  <div style="float:left;width:45%;height:50px;"></div>
  <div style="float:right;width:45%;height:50px;"></div>
</div>

这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。

三：浮动元素的自动clearing
为父容器加上"overflow: hidden" 关于为何父容器可以自动识别: 由于加上 overflow:hidden 之后要计算超出的大小来隐藏，所以父容器会自动撑开自己把所有的子元素放进去，同时会计算浮动的子元素。

<div style="overflow: hidden;">
  <div style="float:left;width:45%;height:50px;"></div>
  <div style="float:right;width:45%;height:50px;"></div>
</div>

这种方法的缺点主要有二个，一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

四：能不能通过CSS语句添加子元素呢，这样就不用修改HTML代码了？
CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素，这正好符合我们的需要。

最终代码

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden
}

.clearfix {
  *zoom: 1
}

content:"." 里面尽量跟一个小点，尽量不要为空，否则在firefox 7.0前的版本会有生成空格， height: 0; 是让这个这个空白字符不显示出来， display: block; clear: both; 是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"*zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

什么是 hasLayout
IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。
在默认情况下，拥有Layout的元素包括：
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
（注意，<p>和<div>默认不拥有Layout。）
凡是具有以下CSS属性的元素，也会拥有布局：
position: absolute
float: left|right
display: inline-block
width: any value other than 'auto'
height: any value other than 'auto'
zoom: any value other than 'normal' （IE专用属性）
writing-mode: tb-rl（IE专用属性）
overflow: hidden|scroll|auto（只对IE 7及以上版本有效）
overflow-x|-y: hidden|scroll|auto（只对IE 7及以上版本有效）