Examples to explain several methods of using CSS to remove floating

In CSS layout, float (floating) is a very important attribute. By setting the floating direction of the element, the page layout effect can be easily achieved. However, floating elements can also cause some problems, especially when the parent element does not set a height. Floating child elements may cause the height of the parent element to collapse, causing confusion in the page layout. Therefore, correctly removing floats is also an important part of web development.

In this article, we will use examples to show some methods of removing floats, including clearing floats (clear), using pseudo elements, using CSS Grid and other techniques.

1. Clear floats

One of the most commonly used methods is by clearing floats. We can add a clear floating tag after the parent element or floating element to achieve the effect of removing floating elements.

There are many ways to clear floats. The more common way is to use an empty tag and set the effect of clearing floats through CSS. Commonly used empty tags are<div> and<code><span></span>.

For example, when a parent element contains multiple floating elements, we can add an empty div tag at the end of the element, and then add the clear:both attribute to the tag in the CSS file. .

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

.clear-fix{
  clear:both;
}

In this way, we can easily remove the float of the parent element.

2. Use pseudo elements

In addition to clearing floating elements, we can also use CSS pseudo elements to solve the problems caused by floating elements. In CSS3, we can use the :before and :after pseudo-elements, which represent adding a virtual element before and after the element respectively.

We can add the ::after pseudo-element on the parent element to clear the floating of its child elements. The specific method is to add a clearfix class (such as clearfix::after) to the parent element, and then in the CSS file. clearfix::after add content:""; display:block; clear:both; attribute value.

<div>
  <div></div>
  <div></div>
</div>

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

In addition, we can also use pseudo-elements to add wrapping layers to floating elements. The specific method is to add ::before and ::after pseudo-elements to floating elements, and set content in these two pseudo-elements: ""; display:table attribute value, so that the effect of wrapping layer can be achieved.

<div>
  <div>
    <div></div>
    <div></div>
  </div>
</div>

.float-wrap::before, .float-wrap::after{
  content:"";
  display:table;
}

.float-wrap::after{
  clear:both;
}

3. Use CSS Grid

CSS Grid is a new layout method, which provides a more flexible layout method. By using CSS Grid, we can realize complex layout very conveniently. Page layout effects. When using CSS Grid, we can use the grid-auto-rows property to automatically adjust the row height to adapt to the height of the child elements.

<div>
  <div></div>
  <div></div>
</div>

.parent-css-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

In this example, we set the parent element to Grid layout, then set two columns (1fr and 1fr), and use the grid-auto-rows attribute to automatically adjust the row height to adapt to the height of the child elements. In this way, even if the child element is floated, it can be smoothly compatible with various browsers.

Summary

Through the above method, we can easily remove floating and avoid the problems caused by the height collapse of the parent element. Of course, there may be different floating solutions in different scenarios. Choosing the correct solution can help us improve the page layout effect and improve the efficiency of web development.