css开发页面布局重要基础！浮动布局全面了解

浮动（Float）在前端开发中是一个常用的布局技术，它可以让元素脱离文档流并且实现文字环绕、块级元素同行显示以及行内元素设置宽高等效果。同时，浮动元素也会带来一些问题，如外边距重叠和父元素高度塌陷等，因此清除浮动和创建块级格式化上下文（BFC）也是我们需要了解和掌握的知识点。

浮动

• 脱离文档流 ：浮动可以让元素脱离文档流，使得其他元素可以围绕它排列，从而实现文字环绕的效果。
  float:left

使用前：

使用后：

• 文字环绕：通过浮动，可以让文本围绕在图片或其他浮动元素的周围，实现页面布局的美化和增加交互性。
• 可以让块级元素同行显示：通过浮动，可以让多个块级元素在同一行上显示，而不是默认的堆叠排列。（如下是使用无序排列对每个排列设置的样式，使用浮动前后的样子）

• 让行内元素可以设置宽高： 浮动元素可以改变行内元素的默认行为，使其具有设置宽高的能力，从而更好地适应页面布局的需求。

• 浮动元素可以使用margin（但是不能使用margin：0 auto）：浮动元素可以使用margin属性来设置外边距，但是不能使用margin: 0 auto；来实现居中对齐，因为浮动会使元素脱离正常的文档流，无法通过margin: 0 auto；来实现水平居中。

清除浮动

• 直接给父容器设置高度：通过给包含浮动元素的父容器设置一个固定的高度，可以清除子容器浮动造成的高度塌陷问题（子容器没有高度）。但是这种方法需要提前知道父容器的高度，不够灵活。
• 增加子容器，在子容器身上清除浮动：在包含浮动元素的父容器内部增加一个额外的子容器，并在子容器上应用清除浮动的样式，例如使用clear: both；这样可以清除掉浮动元素对父容器造成的影响。
• 借助伪元素after ：使用伪元素after在父容器的末尾插入一个空的块级元素，并设置clear: both；可以清除浮动。
• BFC（Block Formatting Context）：BFC是一种块级格式化上下文，可以通过触发BFC来清除浮动。创建BFC的方式包括浮动、定位、行内块、表格单元、overflow属性和弹性盒子等。触发BFC后，浮动元素会被包含在BFC容器内部，从而实现清除浮动的效果。

BFC --Block Formatting Context

• bfc容器的特征：

  1. 块级格式化上下文
  2. 内部盒子会在垂直方向上一一排列，按照文档流的顺序排列。
  3. BFC容器在计算高度时，会将内部浮动的子元素的高度也计算在内，避免高度塌陷问题。
  4. 解决外边距重叠的问题，相邻的两个块级元素的外边距会发生重叠，但是处于不同的BFC容器中的元素的外边距不会重叠。
  5. bfc的效果是让处于bfc内部的元素与外部的元素相互隔离，使内外元素的定位不会互相影响

• 如何创建bfc：

  • 浮动：float：left || right
  • 定位：position：absolute | fixed
  • 行内块：display：inline-block
  • 表格单元：display：table-cell | table-xxx
  • overflow：auto（自适应） | hidden（超出隐藏） | scroll（超出显示滚动条）
  • 弹性盒子：display:flex | inline-flex

以上是关于浮动及清除浮动的一些介绍和方法。如果有具体的示例或更深入的问题，欢迎私信讨论。