HTML中关于浮动的知识点

Posted 2021-11-30 happycoding1

1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止

2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘

3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级盒子平级的文本会向浮动的盒子下方移动）

4清除浮动
父级固定高设置：不灵活
父级设置浮动：用来判断是否要进行清浮动的处理
父级最后一个子级位置添加block快，该快设置
clear:both;
父级选择器::after{
content:"";
display:block;
clear:both;
}
BFC:块级格式化上下文
overflow:hidden;（超出部分隐藏）

::after 给盒子的最后一个位置，添加一个自定义的标签
::before 给盒子的第一个位置，添加一个自定义标签

 

5.浮动快特性：
1.所有的盒子都有可以浮动,并且在浮动脱离原文本流 后，将不在具有原有盒子的特性
2.支持所有的样式设置
3.在不设置大小时，尺寸由内容撑开
4.四个方向的margin会叠加
5.水平布局方向不在固定

6.非浮动块特性：
Block：会向上占据浮动块所空出的区域，可以被浮动块遮盖
inline,inline-block，文字
无法出现在浮动块所覆盖的渔区，一般形成环绕效果

7.浮动换行阻挡
一般情况下出现在瀑布流布局当中 如果上一行的浮动块高度不一致，就会导致当前行浮动块在浮动过程中被阻挡，margin也是浮动块停止的边缘。
一般情况下高度不一致，往往是由盒子的内容高度不一致，问题最多就是图片，当每个图片的高度比不一致时，设置相同的高度，高度会有差异，

解决办法：
移动端：给图片一个固定高度
设置object-fit:cover;

pc端：
1.图片差异不大
给所有的图片给相同的固定高
2.图片高度差异很大
<div class="box">
<img src="" >
</div>
box作为可是区域，宽度大小固定。
图片在盒子中的大小设置要沾满，甚至
超出box的可视区域。Box本身设置overflow:hidden属性
---------------------
作者：一只程序汪
来源：CSDN
原文：https://blog.csdn.net/lanseguhui/article/details/80516969
版权声明：本文为博主原创文章，转载请附上博文链接！