前端第八课--浮动

前端第八课–浮动

**浮动样式的核心原理：**正常情况下，盒子是占据一整行，多个盒子列向排布；设置浮动样式后

box浮动，则后面的box2，box3向前移动占据box的位置；

设置box2的浮动后，样式变为：

box3浮动当父元素的宽度不足以放下所有的浮动元素时，那么超出父元素边界的元素会自动换行显示

父元素设置为浮动，子元素不会受到影响，也就是浮动不会继承；

浮动样式重点：

1.浮动元素之间不会覆盖彼此

2.具有和文本环绕相同的特性，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列

3.行内元素设置浮动脱离标准文档流的控制；

4.文字与同一个盒子里的图片的顶线对齐；

5.文字浮动，图片不浮动，图片会被挤出去；都设置为浮动后，图片会回到原来的位置；

一个浮动元素后面的行内元素会按照文本环绕效果进行排列；

float:left/right;(分别设置左右浮动)

浮动元素不适用margin居中了，丧失了全部的标准文档的规则，脱离了原来的盒子；

浮动样式父元素高度塌陷：

原因：当父元素没有固定高度时，父元素高度由子元素高度撑开；当父元素没有固定高度并且所有的元素都浮动起来时，父元素高度塌陷；

解决方法：

1.最直接的是给它设置一个固定的高，但他的高度不会随子元素的变化而改变；（不推荐使用）

2.让父元素BFC化overflow:hidden; 当形成BFC时，父元素就具有了包裹性：

可简单的理解为，父元素有了一个虚拟的框（此时子元素的外边距不会和父元素的外边距合并），父元素的宽高由里面还在平面上的元素和漂浮的元素一同撑开；

3.利用一个幽灵元素来清除浮动，手动撑开父元素的高度

新建一个空的块元素，并给他设置clear:both属性（缺陷：破坏页面的文档结构）

使用伪元素生成一个幽灵元素，并给他设置clear:both属性

both属性（缺陷：破坏页面的文档结构）

使用伪元素生成一个幽灵元素，并给他设置clear:both属性