浮动应用

Posted 2020-12-28 justsmile2

浮动元素特性：

脱离文档流、具有块特性。

应用：

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

（对于很多插件而言，浮动是个好特性）

缺点：

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

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

清除浮动：

1.浮层加宽度和overflow属性

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

width:200px;

overflow:hidden;

2.父层加伪类处理

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

.wrap{

　　zoom:1

}

.wrap:after{

 　　clear:both;

　　display:block;

          content:"";  

          visibility:hidden;
          height:0

}

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

clear：both；（left/right）