css浮动和清除浮动

CSS浮动是一种布局方式，它可以让元素在文档流中脱离出来，向左或向右移动，直到它们的边缘碰到它们所处的父容器或另一个浮动元素的边缘。

CSS浮动的使用场景通常是为了实现图文混排或多栏布局等效果。可以使用float属性设置元素的浮动方向，常用的值有left和right。

例如，下面的代码将实现一个简单的图文混排效果，其中图片浮动到左侧，文本则紧随其后：

<divclass="container">

<imgsrc="example.jpg"alt="example">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas hendrerit libero sed dolor bibendum, non pellentesque eros malesuada.</p>

</div>

​

<style>

.container {

width: 600px;

}

​

img {

float: left;

margin-right: 10px;

}

​

p {

margin: 0;

}

</style>

除了浮动元素本身，它的父容器和兄弟元素的布局也会受到影响。当多个元素浮动时，它们会按照先后顺序一起浮动，并在父容器内形成一个浮动流。父容器的高度将无法自适应，这时就需要使用clear属性来清除浮动。

clear属性用于指定元素下面的浮动元素是否被允许。常用的值有left、right和both。left表示只清除左侧的浮动元素，right表示只清除右侧的浮动元素，both表示清除左右两侧的浮动元素。

清除浮动是为了解决浮动元素带来的布局问题。在使用浮动元素时，由于浮动元素脱离了文档流，容易对其他元素造成影响，导致布局混乱。因此需要使用一些技巧来清除浮动。

一般来说，清除浮动的方法有两种：使用清除浮动的样式和使用包含浮动的父元素。

1. 使用清除浮动的样式

在 CSS 中，可以使用 clear 属性来清除浮动。clear 属性可以设置在需要清除浮动的元素上，或者在需要容纳浮动元素的父元素上。

下面是一个例子，其中的浮动元素需要使用清除浮动的样式：

<divclass="container">
  <divclass="float-left"></div>
  <divclass="float-right"></div>
  <divclass="clearfix"></div>
</div>
.container{
  background-color: pink;
 }
.float-left {
  float: left;
  width: 50%;
  height: 200px;
  background-color: #ccc;
}
​
.float-right {
  float: right;
  width: 50%;
  height: 200px;
  background-color: transparent;
}
​
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

清除前，尽管第二个div是透明的看不到粉色的父元素，container父元素几乎消失了，因为子元素浮动导致父元素失去了高度

清除后就看的到了

2. 使用包含浮动的父元素

另一种清除浮动的方法是将包含浮动元素的父元素设置为 overflow: hidden 或 overflow: auto。这是因为当父元素设置了 overflow 属性时，该元素会创建一个 BFC（块级格式上下文），从而可以包含其子元素的浮动。

例如：

<divclass="container">
  <divclass="float-left"></div>
  <divclass="float-right"></div>
</div>
cssCopycode.float-left {
  float: left;
  width: 50%;
  height: 200px;
  background-color: #ccc;
}
​
.float-right {
  float: right;
  width: 50%;
  height: 200px;
  background-color: #eee;
}
​
.container {
  overflow: hidden;
}

在上面的示例中，浮动元素的父元素设置了 overflow: hidden，从而包含了其子元素的浮动。这样可以保持页面的布局整洁。