What are the three ways to clear floating float in css

Three ways to clear floating float in css: 1. Add a new element with a specific "clear: both;" style at the end of the parent element. 2. Add the "overflow:auto;" style to the parent div element; 3. Add the pseudo-element ":after" or ":before" to the parent style.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. The definition of floating

causes the element to break away from the document flow and move in the specified direction when it encounters the parent boundary or adjacent The floating element is stopped.

ps: Document flow: Document flow is the position occupied by displayable objects in the document when arranged.

Syntax

float is often followed by attribute values ​​left, right, none

float:none does not use float

float:left floats to the left

float:right Float to the right

2. The purpose of floating

You can set text wrapping or make the element width fill with content ( Similar to Inline-block). One thing to note when using floating is that if the height of the floating element is higher than the parent container, then you need to set the overflow attribute of the parent container to auto to make it automatically full.

3. Floating usage

Analyze HTML structure:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

Analyze CSS code style:

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
    }
    .div1 {
      width: 100px;
      height: 100px;
      background: darkblue;
      float: left;
    }
    .div2 {
      width: 100px;
      height: 100px;
      background: darkgoldenrod;
      float: left;
    }
    .div3 {
      width: 100px;
      height: 100px;
      background: darkgreen;
      float: left;
    }

(Learning video sharing: css video tutorial)

4. Clear floating

Method 1: Add new elements, apply clear: both;

HTML:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div></div>
  </div>

CSS:

.clear {
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0
    }

Everything is back to work.

Method 2: Parent div definition overflow: auto;

HTML:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

CSS:

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
      overflow: auto; 
      zoom: 1; /*zoom: 1; 是在处理兼容性问题 */
    }

Result: also Achieved.

Method 3: Add pseudo-element: after or: before (recommended)

HTML:

<div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

CSS:

.box {
      border: 1px solid #ccc;
      background: #fc9;
      color: #fff;
      margin: 50px auto;
      padding: 50px;
    }
.box:after{
      content: '';
      display: block;
      clear: both;
}

Result: Of course it goes without saying

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What are the three ways to clear floating float in css. For more information, please follow other related articles on the PHP Chinese website!