前端系列第4集-解释下浮动和它的工作原理，清除浮动的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端系列第4集-解释下浮动和它的工作原理，清除浮动的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

浮动是CSS布局中的一个重要概念，它可以让元素脱离标准文档流，并且可以让其他元素环绕在其周围。通常情况下，浮动用于创建多列布局或者图像与文字混排的效果。比如，我们可以使用浮动来实现一个左侧导航栏、右侧主体内容的页面布局。

浮动的工作原理很简单。当一个元素设置为浮动后，它会尝试尽可能地向左或者向右移动，直到遇到包含它的容器边界或者其他浮动元素。同时，其他未设置浮动的元素会忽略浮动元素的位置，继续按照标准文档流排列。

清除浮动有多种方法，其中比较常见的两种是：

使用clear属性：在浮动元素的下方添加一个空元素，并给这个元素设置clear属性。clear属性有left、right、both三个值，分别表示清除左浮动、右浮动以及两者都清除。例如：

<div style="clear:both;"></div>

使用overflow属性：将浮动元素的容器元素设置为一个块级元素，并给它设置overflow属性。这样可以强制容器元素包含浮动元素，并且不会出现溢出的情况。例如：

<div style="overflow:auto;">
  <div style="float:left;">浮动元素</div>
</div>

使用after伪元素：在浮动元素的容器元素上添加一个clearfix类，并在CSS中定义clearfix类的样式，使用after伪元素清除浮动。例如：

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1; /* IE6/7 */
}
<div class="clearfix">
  <div style="float:left;">浮动元素</div>
</div>

使用display属性：将浮动元素的容器元素设置为table、table-cell或者flex等具有弹性布局的属性。这种方法需要考虑兼容性和语义化的问题。例如：

<div style="display: table;">
  <div style="display: table-cell; vertical-align: top;">
    <div style="float:left;">浮动元素</div>
  </div>
</div>

使用inline-block属性：将父元素设置为display:inline-block，子元素再设置float:left等浮动属性。这种方式也可以实现多列布局。

<div style="display: inline-block;">
  <div style="float: left;">浮动元素1</div>
  <div style="float: left;">浮动元素2</div>
  <div style="float: left;">浮动元素3</div>
</div>

使用BFC（块级格式化上下文）：在父元素上触发BFC可以清除浮动，具体方式有多种，如给父元素设置overflow:hidden、position:absolute、display:table等属性都可以触发BFC。

<div style="overflow: hidden;">
  <div style="float: left;">浮动元素</div>
</div>

还有一个比较新的方法是使用CSS Grid布局中的grid属性。可以将子元素设置为grid-column-start和grid-column-end等属性，然后在父元素上设置display: grid即可实现清除浮动。

<div style="display: grid;">
  <div style="grid-column-start: 1; grid-column-end: 2;">浮动元素1</div>
  <div style="grid-column-start: 2; grid-column-end: 3;">浮动元素2</div>
  <div style="grid-column-start: 3; grid-column-end: 4;">浮动元素3</div>
</div>

使用flex布局：将父元素设置为display:flex，子元素再设置float:left等浮动属性。这种方式也可以实现多列布局。

<div style="display: flex;">
  <div style="float: left;">浮动元素1</div>
  <div style="float: left;">浮动元素2</div>
  <div style="float: left;">浮动元素3</div>
</div>

使用网格布局（Grid Layout）：将父元素设置为display:grid，子元素再设置grid-column-start和grid-column-end等属性。这种方式可以实现更复杂的多列布局。

<div style="display: grid;">
  <div style="grid-column-start: 1; grid-column-end: 2;">浮动元素1</div>
  <div style="grid-column-start: 2; grid-column-end: 3;">浮动元素2</div>
  <div style="grid-column-start: 3; grid-column-end: 4;">浮动元素3</div>
</div>

还有一种比较特殊的方法是使用伪元素:before和:after，将它们添加到包含浮动元素的容器中，并给它们设置clear:both属性。这样就可以清除浮动并且不需要在HTML中添加多余的元素。

.container:after {
  content: "";
  display: table;
  clear: both;
}

还有一种比较新的方法是使用CSS变量（CSS Variables）来清除浮动。我们可以在包含浮动元素的容器中添加一个::after伪元素，并且将这个伪元素的高度设置为0，然后利用CSS变量将容器的高度赋值给伪元素的高度，从而达到清除浮动的效果。例如：

.container::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  --height: calc(100% + 1px); /* 设置CSS变量 */
  height: var(--height); /* 使用CSS变量 */
}

这种方法的好处是能够动态地计算容器的高度，因此在响应式布局中更加灵活。但是需要注意的是CSS变量的兼容性问题，目前还不是所有的浏览器都支持CSS变量。

还有一种比较传统的方法是使用JavaScript来清除浮动。我们可以在包含浮动元素的容器中添加一个空的div元素，并且给这个元素设置clear:both属性，然后通过JavaScript来计算出容器的实际高度，将这个高度赋值给空的div元素。例如：

<div class="container">
  <div class="float-left">浮动元素1</div>
  <div class="float-left">浮动元素2</div>
  <div class="float-left">浮动元素3</div>
  <div class="clear-float"></div>
</div>

<script>
  var container = document.querySelector('.container');
  var clearFloat = document.querySelector('.clear-float');
  clearFloat.style.height = container.offsetHeight + 'px';
</script>

这种方法的好处是能够解决一些兼容性问题，但是需要注意的是如果网页中存在大量浮动元素，使用JavaScript来清除浮动可能会对性能产生影响。

还有一种比较特殊的情况，即使用flexbox布局时，浮动元素会自动清除。这是因为在flex容器中，子元素会默认设置为flex-item，而不是常规文档流中的block元素。因此，浮动元素不会对flex容器中其他元素的布局产生影响。

.flex-container {
  display: flex;
}

.flex-item {
  float: left; /* 浮动元素 */
}

还有一种比较特殊的情况，即在CSS Grid布局中，浮动元素同样会被自动清除。这是因为在Grid容器中，子元素默认设置为grid-item，而不是常规文档流中的块级元素。因此，浮动元素不会对Grid容器中其他元素的布局产生影响。

.grid-container {
  display: grid;
}

.grid-item {
  float: left; /* 浮动元素 */
}

还有一种比较简单的清除浮动方法是使用CSS Flexbox布局。我们可以将浮动元素的父元素设置为display: flex，并且将子元素设置为flex属性即可实现清除浮动的效果。

.parent {
  display: flex; /* 将父元素设置为Flex容器 */
}

.child {
  flex: 1; /* 将子元素设置为Flex项 */
  float: left; /* 浮动元素 */
}

浮动（Float）

浮动是 CSS 中用于实现元素水平布局的一种方式。通过 float 属性，可以使一个元素脱离正常的文档流，沿其容器的左侧或右侧边缘排列。浮动通常用于实现文本环绕图片、创建多列布局等效果。

工作原理

当一个元素应用 float 属性后，它会沿其父容器的左侧或右侧边缘浮动。其他非浮动元素将不会覆盖浮动元素，而是环绕它。同时，浮动元素里面的文本和内联元素也会环绕浮动元素。需要注意的是，浮动元素只会影响其后的同级元素。

举个例子，你可以为一个图片元素设置 float: left，这会使图片沿父容器左侧浮动，同时后面的文本会环绕这个图片。

清除浮动（Clear Float）

当一个元素浮动后，它会脱离正常文档流，可能导致父容器高度塌陷等布局问题。为了解决这个问题，我们需要清除浮动。有以下几种常用的清除浮动方法：

使用 clear 属性：你可以在一个元素上应用 clear: both、clear: left 或 clear: right。这会使该元素不允许出现在浮动元素的旁边，从而实现清除浮动的效果。
使用伪元素：这是一种常用的自动清除浮动的方法。通过为父容器添加一个 ::after 伪元素，并设置 content、display 和 clear 属性，可以实现自动清除浮动。
```
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
```
然后，为需要清除浮动的父容器添加 clearfix 类即可。
使用 overflow 属性：为父容器设置 overflow: auto 或 overflow: hidden 也可以实现清除浮动。这种方法有时可能会导致其他布局问题，需要根据实际情况权衡。
使用 display: flex 或 display: grid：使用 Flexbox 或 Grid 布局的容器会自动清除浮动，因为这两种布局方式不受子元素的浮动属性影响。