浮动的学习与总结

浮动

标准流

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

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

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

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

为什么学习浮动？

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

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

float:属性值

属性值可以是 none left right 不浮动 向左浮动 向右浮动

浮动特性

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

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

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

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

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

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

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

为了约束浮动元素位置，我们网页布局一般采取的策略是
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则

浮动布局注意点

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

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

为什么要清楚浮动？

由于父级盒子大多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响后面的标准流盒子

清除浮动的方法

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;
}