Why clear float? How to clear it? (float)

1. Understand clearing floats

1. Why clear floats

We said before that floating is essentially used to create some text mixing effects, but if we use it for layout, many problems will arise.

Since the floating element no longer occupies the position of the original document flow, it will have an impact on the layout of subsequent elements. In order to solve these problems, the floating element needs to be cleared at this time.

Recommended study: CSS video tutorial

To be precise, it is not clearing the float, but after clearing the float. Impact

2. Clear the essence of floating

Clear the essence of floating: Mainly to solve the problem of the internal height of the parent element being 0 due to the floating of the child.

Let’s explain this sentence in detail

#The further explanation is that if a parent p under the standard stream does not set the height attribute, then its height is Will be stretched by the height of the child element. But if the child element in the parent p is floating, and if there is a

brother p below the parent p, then the brother p will block the parent element. This phenomenon is also called float overflow.

Example

    
    
    


    
 父p
        
子p
        
子p
    

    
兄弟p

Run result

It is obvious that p1 and p2 have floated up, and brother p has moved up. Here, because the parent p has text, it occupies a little height, otherwise the brother p will completely cover the parent p.

Of course we can set the height of the parent p to prevent it from being covered by the brother p. For example, set height here: 200px;

Refresh the page

When the parent p sets the height, the overwriting problem is solved, but in Many times we don't set the height of the parent p, because many times we don't know how much the height of the parent p should be set.

So we need to think about solving this problem at this time.

2. Method of clearing floats

The essence of clearing floats is to circle the floating boxes in the parent box inside, so that the parent box closes the exit and entrance. Let them come out and influence other elements.

In CSS, the clear attribute is used to clear floats.

Basic syntax format

选择器 {clear:属性值;}

Attribute value

##1. Extra tag method

By adding an empty tag at the end of the floating element, for example

We add

    
 父p
        
子p
        
子p
        
  
    

    
兄弟p

to the above code and the running result

is perfect solved.

Advantages: Easy to understand and easy to write.

Disadvantages Add meaningless tags and poor structure.

2. Parent method of adding overflow attribute

The floating effect can be cleared by triggering BFC. (BFC will be discussed later)

可以给父级元素添加： overflow为 hidden|auto|scroll  都可以实现。

We can also achieve the effect of removing floating by modifying the above code to

    
 父p   
        
子p
        
子p
    

    
兄弟p

.

Advantages The code is concise

Disadvantages When the content increases, it is easy to cause automatic line wrapping, causing the content to be hidden, and elements that need to overflow cannot be displayed.

3. Use the after pseudo-element to clear floats

:after 方式为空元素的升级版，好处是不用单独加标签了**

Example

The advantages are consistent with the closed floating ideological structure and the semantics are correct

Disadvantages Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.

Note: Content: "." should be followed by a small dot, or something else, and should not be empty, otherwise there will be spaces generated in versions before Firefox 7.0.

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

Usage method Replace the above clearfix style with the following

    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

Advantages The code is more concise

Disadvantages Since IE6-7 does not support :after, use zoom:1 to trigger hasLayout.

5. Summary

1、在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式.文档结构更加清晰；
2、在小模块如ul里推荐使用overflow:hidden;（同时留意可能产生的隐藏溢出元素问题）；

This article comes from PHP Chinese website,

CSS tutorial column, welcome to learn

The above is the detailed content of Why clear float? How to clear it? (float). For more information, please follow other related articles on the PHP Chinese website!