浮动应用

浮动元素特性:

为文字环绕效果而生、仅影响其后元素、能感知其后同胞兄弟、脱离文档流、具有行内块特性。

应用:

流式布局、自适应宽度、清除多余空隙。

(对于很多插件而言,浮动是个好特性)

缺点:脱离文档流,使其父元素高度塌陷

影响到其后元素布局及其包裹层高度。

(可能出现的结果是布局乱、元素高度获取不准确和重叠现象)

清除浮动:

1.浮层加宽度和overflow属性

(缺点是限制了子层元素的扩展,即你不处理人家是默认的 visible ,你这么一弄变 hidden 了,但是用起来真的很爽。。)

200px;

overflow:hidden;

2.父层加伪类处理

(用一个对大局无影响的点处理受浮动影响的部分)

.wrap{

  zoom:1

}

.wrap:after{

   clear:both;

  display:block;

          content:"";  

          visibility:hidden;
          height:0

}

 3.浮动元素其后加  br  标签 或者文档内位于浮动元素之后的标签,加样式:

clear:both;(left/right)

Put the favorites in the favorites and empty the favorites.
原文地址:https://www.cnblogs.com/justSmile2/p/9432341.html