CSS浮动

pc端网页布局的三种方式：普通流，浮动，定位

移动端的布局在后面会专门学习，就看后面模块的笔记叭，俺还没写

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者是另一个浮动框边缘

float: left || right || none(默认不浮动);

---

浮动特性：

1.浮动元素会脱离标准流，不再保留原先的位置，原先的位置会被后面的标准流盒子占有，不会影响前面的标准流

2.浮动元素会一行内显示并且元素顶部对齐，放不下时另起一行顶端对齐

3.任何元素都可以加浮动，浮动元素会自动具有行内块元素的特征

4.如果块级盒子没有设置宽度，默认和父亲一样宽，但添加浮动是根据里面的内容来决定的；行内元素同理

5.浮动的盒子中间是没有缝隙的，大家都是紧挨着的

6.用标准流的父元素来约束浮动，这样的话浮动就会相对于父盒子来浮动

---

清除浮动

为什么要清除浮动：由于父盒子很多情况下不方便给高度，但是子盒子浮动又不占位置，最后父盒子高度为0时，就会影响下面的标准流盒子

清除浮动的本质

• 如果父盒子本身有高度，不需要清除浮动
• 清除浮动本质是清除浮动元素造成的影响
• 清除浮动后，父级元素会根据浮动的子盒子自动检测高度。父级有了高度就不会影响后面的标准流了

语法：选择器 {clear :属性值 ;}

left:不允许左侧有浮动元素

right:不允许右侧有浮动元素

both:同时清除左右两侧浮动

清除浮动的四种方法：

1.在浮动元素末尾添加一个空标签，必须是块级的，例如<div style=" clear:both"></div>

2.给父盒子添加overflow:hidden;缺点是会把溢出的隐藏

3. :after伪元素法

给父元素添加的，设置父元素的class为clearfix，然后给父元素添加下面的样式

4. 双伪元素清除浮动

 给父元素添加的，设置父元素的class为clearfix，然后给父元素添加下面的样式