css clear float

CSS Tips Clearfix

Floating is a very important layout technology in CSS and is widely used in web page layout. But it will also cause some problems, such as the height collapse of the parent element. Clearfix technology was created to solve this problem. This article will introduce several common methods of clearing floats.

1. The problem of floating

First, let’s understand the problem of floating.

HTML：

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS：

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

The effect is as shown below:

##You can see, left Both the side area and the right area use floating technology. But if we want the height of the parent element (i.e. .parent) to be equal to the height of the child element, then the following problems will occur:

As you can see, the height of the parent element Significantly smaller. This is because the child elements use floating, so they are out of the document flow, and the parent element does not contain them, causing them to not be included in the height calculation.

2. Several methods of clearing float

In order to solve this problem, we need to let the parent element recalculate the height by clearing the float. Here are some commonly used methods to clear floats:

1. Use empty labels to clear floats

This is a very common method. It uses the characteristics of empty labels to clear floats. The code is as follows:

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
  <div style="clear: both;"></div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

Add an empty tag at the end of the parent element and set

clear:both to indicate the tag Clear float.

But this method is more troublesome and requires adding a meaningless tag, which is not conducive to code maintenance.

2. Use the ::after pseudo-element to clear floats

Similar to the first method, use the ::after pseudo-element to clear floats. Since ::after is a block element, you can add a block-level element after the floated element to clear the float.

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}

Use the ::after pseudo-element on the parent element and set

content:"";display:block;clear :both; means adding a block-level element after the parent element and clearing the float.

This method only requires adding CSS styles on the parent element, without adding extra HTML tags, which is very convenient.

3. Use BFC to clear floats

BFC (Block Formatting Context, block-level formatting context) is a concept in CSS that allows elements to be rendered in an independent rendering area. , you can clear the float, the implementation is as follows:

HTML:

<div class="parent">
  <div class="left">左侧区域</div>
  <div class="right">右侧区域</div>
</div>

CSS:

.left {
  float: left;
  width: 300px;
  height: 100px;
  background-color: #ccc;
}

.right {
  float: right;
  width: 300px;
  height: 200px;
  background-color: #eee;
}

.parent {
  overflow: hidden;
}

Set

overflow:hidden on the parent element, at this time , the parent element forms a BFC so that the floating elements can be included correctly.

But this method also has some limitations, because it will change the style of the parent element. For example, the parent element cannot set negative margins, nor can it set the z-index attribute.

3. Summary

This article introduces several methods of clearing floats, including using empty tags to clear floats, using ::after pseudo-elements to clear floats, and using BFC to clear floats. These methods are all practiced techniques and can be flexibly applied in project development to solve problems caused by floating.

The above is the detailed content of css clear float. For more information, please follow other related articles on the PHP Chinese website!