html中关于浮动的定义,HTML中关于浮动的知识点

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.图片高度差异很大

box作为可是区域，宽度大小固定。

图片在盒子中的大小设置要沾满，甚至

超出box的可视区域。Box本身设置overflow:hidden属性

---------------------

作者：一只程序汪

来源：CSDN

原文：https://blog.csdn.net/lanseguhui/article/details/80516969

版权声明：本文为博主原创文章，转载请附上博文链接！

标签：浮动,知识点,盒子,父级,高度,浮动块,HTML,设置

来源： https://www.cnblogs.com/happycoding1/p/10859238.html