float属性

1. 如果父元素里只有这么一个浮动元素，那么父元素就会塌陷

2. 左浮动/右浮动元素会尽量接近父元素的顶部和左边/右边

3. 前面的元素会将浮动元素向下推,如果浮动元素其前边的元素为行内（inline/inline-block）元素，则浮动元素会挤占他们的位置，直接顶到父元素的顶部
   如果前面的元素是块状元素，则就会紧贴该块状元素的底部;

如果元素位于浮动元素的下方，则会环绕着浮动元素

  
  

 
 .a{
  border:1px solid red;
}
.b{
  width: 100px;
  height: 100px;
  border: 1px solid;
  float:left;
}

我们知道肯定会引起父元素a塌陷的，解决的办法有以下几种：

1. 给父元素加一个空标签,必须是块级元素，或者其display：block的元素,inline-block不行
   

加多余的标签,结构累赘

1. 使用overflow:hidden,给父元素设置此属性，（BFC)
   3.after生成伪元素，高度为0，设置成block,设置clear:both

w3chelp给的6中方案：
采用一个HTML标签，以及css的clear属性，来手工清理浮动；
采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
使用 TABLE 以及 TD 标签作为浮动元素容器；
采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!