浮动

标准流

所谓的标准流 就是标签按照规定的默认方式排列

1. 块级元素独占一行，从上向下顺序排列

2. 行内元素会按照顺序，从左到右顺序排列，遇到父元素的边缘则自动换行

标准流是最基本的布局方式

为什么学习浮动？

有很多布局效果，标准流没有办法完成，此时就可以利用浮动布局完成布局，因为浮动可以改变元素标签默认的排列方式

网页布局第一准则： 多个块级元素纵向排列标准流， 多个块级元素纵向排列找浮动

float:属性值

浮动特性

1. 脱离标准普通流的控制移动到所指定的位置 （俗称脱标）

2. 浮动的盒子不再保留原先的位置，后面没有脱标的盒子会抢占该位置，不恰当的处理会导致掩盖

3. 如果多个盒子都设置了浮动，则它们会按照属性值 一行内显示并且顶端对齐排列

   注意：浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

4. 如果行内块元素有了浮动，则不需要转行块级\行内块元素就可以直接给高度和宽度

5. 任何元素都可以浮动，不管是原先什么特性的元素，添加浮动之后都具有行内块元素的特性

浮动元素经常和标准流父级搭配使用

浮动布局注意点

1. 浮动和标准流的父盒子搭配
2. 一个元素浮动了，理论上其余的兄弟也应该浮动

为什么要清楚浮动？

清除浮动的方法

1. 额外标签法也称隔墙法，是W3C推荐的做法
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 父级添加双伪元素

额外标签法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5B3yu3Vc-1650344165149)(https://github.com/Detectiv1/Detectiv1.github.io/blob/main/images/%E9%A2%9D%E5%A4%96%E6%A0%87%E7%AD%BE%E6%B3%95.jpg?raw=true)]

overflow法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkRTlK3f-1650344165151)(https://github.com/Detectiv1/Detectiv1.github.io/blob/main/images/overflow%E6%B3%95.jpg?raw=true)]

after伪元素法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N31gg0kA-1650344165151)(https://github.com/Detectiv1/Detectiv1.github.io/blob/main/images/after%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B3%95.jpg?raw=true)]

双伪元素法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9Fg5tHL-1650344165152)(https://github.com/Detectiv1/Detectiv1.github.io/blob/main/images/%E5%8F%8C%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B3%95.jpg?raw=true)]

清除浮动总结

1. 清除浮动的本质是？

2. 清除浮动的策略是？

最常用的清除浮动代码

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}