Detailed explanation of the impact of floating in CSS and how to remove floating

• The first phone interview, the interviewer asked me what methods do you know to remove floating?
  This is my answer: "There are two methods. One is to use "clear: both" on the element that needs to be removed from float; the other is to use "# on the parent element of the floating element. ##overflow:hidden".To be honest, when I talked about the second method, I didn’t practice it. I just read it and then talked about it vaguely.
  

• This question was also asked in the second interview, but because of the lessons learned from the first interview, I went back and read a book. There is a special chapter in the "CSS Design Guide" that talks about several methods of removing floats. But time is tight, I just read the book once and didn't knock it with my hands, so when I asked, I just listed it.

  1. clear: both;
  2. overflow: hidden;
  3. Floating parent element
  4. Add an element that removes floating elements after the floating element.
  Later, when I interviewed my sister, she added, "Look at this horizontal
  navigation column. It must be implemented using floating, so he definitely cannot use overflow:hidden; this should be because if there is a submenu in the row bar, it will be invisible. How to solve it?"My answer at the time was Add an element that removes the floating element after the floating element. The interviewer didn't say whether it was right or wrong. You still need to do a navigation yourself to know.
  
  

I have written a note here before about the principle of floating. Today, I will write another note about removing floating. The content comes from the book "CSS Design Guide"

.

The impact of floating
Performance of modern browsers
• Place two adjacent inline elements. If the second If an inline element is left-floated, its

  display
  will be modified to block after the inline element is set to float; however, its size will be displayed according to the setting or the size of its content and will not occupy the entire line. space, the inline element next to it will be behind the floating element in this line and will not be on an equal footing with the floating element. But if it is next to an inline block-level element with a set width, then this inline block-level element will not be on an equal footing with the floating element. The element will also be behind the floating element. If it is next to a block-level element, then this block-level element will occupy the space of the inline element that is set to float.
  I can't tell you why.
  
  

  In IE7 and earlier versions of
ie browsers

• , the inline elements next to them will be below the floating elements on another line. Isn’t it even weirder?
  

  After the block-level element is floated
The browser will take back the space originally occupied by the block-level element, and the element immediately following it will be promoted upward to the floating element if space allows. On the same level. The block-level element that is set to float will keep its original position and silently watch the elements it affects change.
• The border of the parent element of the floating element will also shrink to the child elements that are not set to float within the parent element.

  
  
  

  After the inline elements are floated
In fact, this seems to have never been set up like this in the exercises I am currently doing, but it does bring a different experience.

• 
  

As for the floating of inline elements, I have not encountered it when referring to the source code of other websites, so I will leave it alone first.

The following are several methods of surrounding floating elements, and the appropriate situations for each method.

Simply add a child element to the html markup and apply the clear
attribute
• to it.

    <section >
        <img src="7f0ff.png" alt="" style="float:left" />
        <p>it s fun to float</p>
        <p style="clear:left;"></p>
    </section>
    <footer>
        here is the footer element.
    </footer>

  But if we particularly don’t want to add this pure performance element, we can use css to add this clear element. Add a class to the section:
.clearfix

• .clearfix:after{
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;}

  Method 1:
Add: overflow:hidden to the parent element

• This method Forces a parent element to surround a floated child element. Actually: The real purpose of the overflow:hidden statement is to prevent the containing element from being stretched by oversized content. After applying overflow:hidden, the containing element still maintains its set width and height, and oversized text content will be cut off by the container. In addition, overflow:hidden has another effect, that is, it can reliably force the parent element to include its floating child elements. However, the consequence is that once the text content exceeds the set width, it will be invisible.
  

• Method 2: Float the parent element at the same time
  In fact, this is not clearly floating for the entire website layout, it just makes the parent element surround the floating child element, but although the floating parent element surrounds the floating child elements, it does not solve the impact of the floating parent element itself on the layout of the entire website. I have seen that some website source codes still like to use this method, and then in this Surround the floating parent element with another parent element, and set the width and height for it to ensure that it does not affect the layout of other content in the web page.

• Method 3: Add a non-floating clear element
  It is to add a non-floating child element to the end of the parent element, and then clear the child element float.
  However, there are two ways to add a sub-element at the end of the containing element as a clearing element.

#These three methods are implemented using parent elements to surround floating child elements.
Analyze these three methods:
1. You cannot apply overflow:hidden on the top-level element of the drop-down menu; otherwise the drop-down menu as its child element will not be displayed.
2. You cannot use the floating parent element technology on an element that has been automatically margincentered, otherwise it will not be centered again.
But what if there is no parent element in some cases?
I would definitely say, add one more, it’s not troublesome, but it will increase the traversal depth,
If an element wants to be affected by the floating element, but also does not want the elements after it to be affected by the floating element. Influence, you can add a block-level element inside this element, and then clear the float for this block-level element . Another thing to note is that you must not set an extra height for this element, otherwise the effect will not be effective. It will appear. I hope people who read this article can test it for themselves.

【Related recommendations】

1. Free css online video tutorial

2. css online manual

3. php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of Detailed explanation of the impact of floating in CSS and how to remove floating. For more information, please follow other related articles on the PHP Chinese website!