CSS method of clearing float and BFC

CSS method of clearing float and BFC

BFC

BFC: Block Formatting Context

BFC layout rules

  • The inner boxes will be placed one after another in the vertical direction.
  • The vertical distance of the Box is determined by margin. The margins of two adjacent Boxes belonging to the same BFC will overlap.
  • When calculating the height of the BFC, floating elements are also included in the calculation.
  • The BFC area will not overlap with the float box.
  • The left edge of the margin box of each box (block and line boxes) touches the left edge of the containing block's border box (for left-to-right formatting, and vice versa). This is true even if there are floats.
  • BFC is an isolated independent container on the page. The child elements inside the container will not affect the elements outside. The same is true in reverse.

How to create a Block Formatting Context

1. The value of float is not none.

2. The value of position is not static or relative.

3. The value of display is inline-block , table-cell , flex , table-caption or inline-flex
4. The value of overflow is not visible

The role of BFC

1. Use BFC to avoid margin overlap.

2. Adaptive two-column layout

3. Clear floats.

Clear Float

Clearing floats is mainly to solve the problem that the internal height of the parent element is 0 due to the floating of child elements.

Method to clear floats

1. Additional labeling method

After the last floating label, add a new label and set it to clear: both; (not recommended)

Advantages: easy to understand, convenient

Disadvantages: Adding meaningless tags, poor semantics

<style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clear"></div>
</div>
<div class="div2"></div>
</body>

2. Add overflow attribute to the parent

Clear floating by triggering BFC. (Not recommended)

Advantages: concise code

Disadvantages: When the content increases, it is easy to cause the content to be hidden due to the failure of automatic line wrapping, and the overflowing elements cannot be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
            overflow: hidden;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

3. Use the after pseudo element to clear the float (recommended)

Advantages: Conforms to the closed floating concept and has a correct structural semantics.

Disadvantages: ie6-7 does not support pseudo-elements: after, use zoom: 1 to trigger hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
        .clearfix:after {
            content: ""; /*The content is empty*/
            display: block; /*Convert to block-level element*/
            height: 0; /*Height is 0*/
            clear: both; /*clear float*/
            visibility: hidden; /*Hide the box*/
        }
        .clearfix {
            *zoom: 1; /*IE6\7 processing method*/
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

4. Use before and after double pseudo elements to clear floats

Advantages: Not only can it clear floating, but it can also solve the problem of height collapse (add the class name clearfix to the parent box)

Disadvantage: Use zoom:1 to trigger hasLayout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1 {
            background: #00a2d4;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background: #9889c1;
        }
        .right {
            float: right;
            width: 200px;
            height: 200px;
            background:orangered;
        }
        .clearfix:after, .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
    </style>
</head>
<body>
<div class="div1 clearfix">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2"></div>
</body>
</html>

Summarize

This is the end of this article about CSS clear float and BFC. For more relevant CSS float BFC content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  Press Enter to automatically submit the form. Unexpected discovery

>>:  Do you know how to use mock in vue project?

Recommend

Simple usage of MySQL temporary tables

MySQL temporary tables are very useful when we ne...

React realizes secondary linkage effect (staircase effect)

This article shares the specific code of React to...

Installation and verification of pytorch in linux or windows environment (solving runtimeerror problem)

1. Download the corresponding installation file f...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...

Native JS to achieve digital table special effects

This article shares a digital clock effect implem...

HTML end tag issue and w3c standard

According to the principles of W3C, each start tag...

Solution to the problem that mixin does not work in scss (browser cannot compile it)

Mixin method: The browser cannot compile: The old...

Vue commonly used high-order functions and comprehensive examples

1. Commonly used high-order functions of arrays S...

IDEA2020.1.2 Detailed tutorial on creating a web project and configuring Tomcat

This article is an integrated article on how to c...

Detailed explanation of JavaScript Promise and Async/Await

Table of contents Overview Four examples Example ...

React implements a highly adaptive virtual list

Table of contents Before transformation: After tr...

Vue3.0 implements the encapsulation of the drop-down menu

Vue3.0 has been out for a while, and it is necess...

Navicat for MySql Visual Import CSV File

This article shares the specific code of Navicat ...

js to achieve simple product screening function

This article example shares the specific code of ...

Differences between MySQL MyISAM and InnoDB

the difference: 1. InnoDB supports transactions, ...