css笔记 - 张鑫旭css课程笔记

https://www.imooc.com/t/197450 float

float的设计初衷/原本作用-是为了实现文字环绕效果 如，一个图片和一段文字垂直放置，给图片加上浮动，文字就环绕图片展示了。

浮动的包裹与破坏

• 包裹
• 收缩
• 坚挺
• 隔绝 - BFC

具有包裹的其他属性：(是不是可以生成块级上下文的其他属性？)

• display: inline-block、table-cell...
• position: absolute(近亲)、fixed、sticky
• overflow： hidden、scroll

破坏 - 容器被破坏 父元素高度塌陷

其他具有破坏属性的属性

• display: none
• position: absolute/fixed/sticky

总结 浮动是魔鬼 无宽度 无图片 无浮动

浮动让父元素高度塌陷不是bug而是标准！ 浮动的破坏性只是单纯为了实现文字环绕效果而已；

清除浮动 其实是清除浮动带来的影响，浮动还在

基本方法： 1.在浮动元素的父元素底部插入clear:both 浮动元素和外部元素还是会有联系，例如发生margin重叠效果

浮动元素的父元素内部，如果有其他子元素有margin，还是会跑到父元素的外边，导致和父元素其他兄弟元素的margin重叠。

做法： 　　a. 用html， block水平元素底部插入一个空的div元素即可 　　b. 用css, after伪元素， 　　.clearfix:after{} 　　.clearfix{}

2.使父元素BFC(ie8+)或haslayout(ie6/7) bfc形成一个封闭的结构，保证里边的元素不会对外部发生任何影响，例如浮动带来的影响，也就不会发生margin重叠,

因为bfc所形成的新块，包含内部元素的margin； 具体的区别对比，最清晰的看这个示例：https://www.imooc.com/code/2778

怎么形成BFC? BFC、haslayout通常声明

• float:left/right;
• position: absolute/fixed;
• overflow: hidden/scroll(ie7+)
• display: inline-block、table-cell(ie8+)
• width/height/*【zoom:1】/..(ie6/7)

以上，除了zoom:1以外，其他都不能通用，因为让所有元素都float不现实 但是zoom：1只在低版本ie，高版本也不兼容的。

通用清除浮动带来影响的写法：

1 .clearfix:after{content:'';clear:both;display:block;height:0;overflow:hidden;}
2 .clearfix:after{content:'';display:table;clear:both;} //大神推荐写法，与上边任选其一
3 .clearfix{*zoom:1;}

总结

clearfix只能用在包含浮动元素的父级元素上，滥用会有ie低版本的触发haslayout导致的诡异问题