Home > Web Front-end > Front-end Q&A > css clear float

css clear float

王林
Release: 2023-05-27 15:47:40
Original
1102 people have browsed it

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:

1

2

3

4

<div class="parent">

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

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

</div>

Copy after login
Copy after login
Copy after login

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

.left {

  float: left;

  width: 300px;

  height: 100px;

  background-color: #ccc;

}

 

.right {

  float: right;

  width: 300px;

  height: 200px;

  background-color: #eee;

}

Copy after login
Copy after login

The effect is as shown below:

css clear float

##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:

css clear float

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:

1

2

3

4

5

<div class="parent">

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

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

  <div style="clear: both;"></div>

</div>

Copy after login

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

.left {

  float: left;

  width: 300px;

  height: 100px;

  background-color: #ccc;

}

 

.right {

  float: right;

  width: 300px;

  height: 200px;

  background-color: #eee;

}

Copy after login
Copy after login

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:

1

2

3

4

<div class="parent">

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

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

</div>

Copy after login
Copy after login
Copy after login

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

.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;

}

Copy after login

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:

1

2

3

4

<div class="parent">

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

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

</div>

Copy after login
Copy after login
Copy after login

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.left {

  float: left;

  width: 300px;

  height: 100px;

  background-color: #ccc;

}

 

.right {

  float: right;

  width: 300px;

  height: 200px;

  background-color: #eee;

}

 

.parent {

  overflow: hidden;

}

Copy after login
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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template