清除浮动float

技术css

有浮动引起的三个问题

  • 父容器无法包裹浮动元素，高度无法被撑开，认为此元素不在父元素内（脱离文档流），影响与父元素同级的元素(文字产生环绕、元素内容影响等)（给父元素添加clearfix样式）
  • 与浮动元素同级的非浮动元素会跟随其后*（clear清除）8
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构（clear清除）
1
2
3
4
5
6
 clear : none | left | right | both；取值只对本元素有效
取值：
   none  :  默认值.，允许两边都可以有浮动对象
   left   :  不允许本元素左边有浮动对象
   right  :  不允许本元素右边有浮动对象
   both  :  不允许有浮动对象
  • 添加.clearfix样式，在父级元素中添加一个class=“clearfix”的样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.clearfix:before, .clearfix:after{ 
    content: ""; 
    display: table;
}
.clearfix:after{ 
    clear: both;
}
.clearfix{
     *zoom: 1; /* for ie 6,7触发hasLayout，使元素闭合内部浮动*/
}
或者：
.clearfix{ 
      overflow:hidden; 
      _zoom:1; /* _zoom是CSS hack中专对IE6起作用的部分*/
}

zoom:1表示对象的缩放比例，overflow:hidden和 _zoom:1; 这两个属性连起来起作用清除内部浮动
clearfix 主要是用在浮动层的父层，而 clear 主要是用在浮动层与浮动层之间，和浮动层同一级，如果想要撑开父层的高度，clear 就要放在最后。

本文标题:清除浮动float

文章作者:findmoon

发布时间:2016年05月04日 - 15时17分

最后更新:2016年05月04日 - 16时56分

原始链接://findmoon.github.io/index.html/2016/05/04/清除浮动float/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
,