22-清除浮动

Posted 2021-03-04 xiang-liang

清除浮动
　　当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响
浮动的清理（clear）
　　值：
　　　　none：默认值。允许两边都可以有浮动对象
　　　　left：不允许左边有浮动对象
　　　　right：不允许右边有浮动对象
　　　　both：左右两侧都不允许有浮动对象

*******浮动浮动，先浮后动，浮动的对象，会先漂浮起，离开原来的位置。后动，就是它后面的对象，会向它原来的位置上，动起来。

　　清除浮动，就是可以去掉前面对象浮动，对后面对象的影响。
　　为什么，原来在一行中的两个块，会因为，浏览器窗口的大小，改变，而改变其原来的位置
*****设置一个块水平居中时，都会给这个块设置一个宽度值。
　　当父元素，没有指定，高度时，并且，它的子元素有浮动，这时，这个父元素的高度不会自动增加。
清除浮动的方法
　　1、额外标签法（增加一个空标签，就是没有内容的标签）
　　这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear：both”的元素，强迫容器适应它的高度以便装下所有的float元素
　　
　　<div id="main">
　　　　<div id="left">左盒子</div>
　　　　<div id="right">右盒子</div>
　　　　<div class="clear"></div>增加一个空的div

　　</div>
　　<div id="footer">底部</div>
2、父元素使用overflow的方法
　　通过设置父元素overflow值设置为hidden，是最简单的清除浮动方法，但是如果子元素使用了定位布局，就会很难实现

　　*{margin:0; padding:0;}
　　#main,#footer{margin:0 auto;}
　　#main{width:800px; background:#ccc; overflow:hidden; zoom:1; position:relative;}
　　#left{width:200px; height:200px;}
　　#right{width:300px; height:300px; background:green; float:right}
　　#footer{width:800px; height:50px; background:red;}

多学一点zoom
　　zoom只有IE内核的浏览器支持，缩放比例。
　　
　　normal：默认值。使用对象的实际尺寸
　　number：百分数 | 无符号浮动实数。浮点实属
　　设置或检索对象的缩放比例 数值为1.0或百分数为100%时相当于此属性的normal值

　　zoom：1解决IE6高度适应问题
　　　　深入布局技巧
　　css中溢出的使用
　　　　overflow：visible[ 默认值。不剪切内容也不设置当对象的内容超过其 加滚动条]，auto[ 在必需时 对象内容才会被裁指定高度及宽度时如何管 切或显示滚动条]，hidden[ 不现实超出对象尺寸李内容 的内容 ]，scroll [ 总是显示滚动条 ]
　　　　
3、利用伪对象after方法：
　　定义一个类，使用伪对象after，控制浮动元素的影响。
　　网上最流行的清除浮动代码：
　　.clearFix:after{
　　　　clear:both;
　　　　display:block;
　　　　visbility:hidden;
　　　　height:0;
　　　　line-height:0;
　　　　content:"";
　　}
　　.clearFix{zoom:1;} /* 解决IE6/7兼容性问题 */