What are the ways to clear floats in css

青灯夜游
Release: 2023-01-04 09:34:19
Original
12324 people have browsed it

Css method to clear floating: 1. At the end of the parent tag, add an empty div tag with the "clear:both" style; 2. The parent div tag defines the pseudo-class ":after" and the zoom attribute; 3. The parent div element defines the "overflow:hidden" style.

What are the ways to clear floats in css

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

After using float, the height of the parent box becomes 0. Let's write an example to take a look. Create a parent div and set the border attribute. Then create two child element spans below and set them to float.

The specific code is as follows:

What are the ways to clear floats in css

Effect:

What are the ways to clear floats in css
From the picture above It can be seen that after adding float to span, the height of the parent element div becomes 0 (red box). We have the following ways to solve this problem

1. Add an empty div tag at the end of the tag clear:both

Source code:

What are the ways to clear floats in css

Effect:

What are the ways to clear floats in css
Principle: Add For an empty div, use clear:both raised by CSS to clear the float, so that the parent div can automatically obtain the height.

Advantages: Simple, less code, good browser support, not prone to strange problems

Disadvantages: Many beginners do not understand the principle ; If the page has a lot of floating layouts, a lot of empty divs will be added, which is not conducive to page optimization.

(Learning video sharing: css video tutorial)

2. Parent div defines pseudo-classes: after and zoom

Source code:

What are the ways to clear floats in css

Effect:

What are the ways to clear floats in css
Principle: The function and effect of element generation pseudo-class are equivalent to the principle in method 2, but only supported by IE8 and above and non-IE browsers: after, zoom (IE converted with attributes) can solve ie6, ie7 Floating problem

Advantages: The browser has good support and is not prone to strange problems. The writing method is fixed. You can copy and use it directly if you don’t understand it; (The editor strongly recommends using this method. Simple and convenient, just add a class to solve the problem)

Disadvantages: There are many css codes, and many beginners do not understand the principle. It takes two lines of code to be used in conjunction with mainstream browsers All supported.

3. Parent div definition overflow:hidden

##Source code:

What are the ways to clear floats in css
Effect:
What are the ways to clear floats in css

Advantages: Simple, less code, good browser support

Disadvantages: cannot be used with position, because the exceeded size will be hidden. (This method is not recommended as it may affect the layout of page elements)

4. Define the height of the parent element separately

Source code:
What are the ways to clear floats in css
Effect:
What are the ways to clear floats in css
Principle: If the parent element does not define a height, the height of the parent element is completely stretched by the child elements , the parent div manually defines the height, which solves the problem that the parent div cannot automatically obtain the height.

Advantages: Simple, less code, easy to master.

Disadvantages: It is only suitable for fixed-height layouts. The precise height must be given. If the height is different from the parent div, problems will occur. It will have a big impact on responsive layout.

For more programming related knowledge, please visit:

Programming Video! !

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

Related labels:
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