CSS知识点5

今天学习了了两个小技巧：1.浮动float

2.开启BFC的方法

3.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

float浮动的方向：left左浮动，right右浮动，none无浮动

示例：

 

4.可以看到由于cx进行了浮动，cx下边的zx自动向上并，和cx重叠在了一起。

这就是浮动造成的高度坍塌，cx浮动以后无法有效的占据位置。

这个时候就需要开启BFC

5.开启BFC 的方式：
1.overflow的值不是visible的其他值
2.display的值是inline-block、table、table-cell、flex

3.float的值不是none的其他值
 
能解决那些问题
1.matgin重叠的问题
2.浮动带来的父元素高度坍塌问题

示例：

 

6.开启BFC以后cx的高度坍塌问题得到解决，zx就自然的排在cx和qw的下方。

7. 左右浮动还有一个小差别。

左浮动是从左往右，右浮动是从右往左。

示例：