The effects of floating in CSS and how to remove floats

• First phone interview, interview my brother asked me what do you know about the way to remove floating?
  That's what I said. "There are two ways to use" clear:both "on elements that need to be removed from the float, and" Overflow:hidden "for the parent element of the floating element.
  To tell the truth when I said the second method, I did not practice, just read, and then vague said.

• The second interview, also asked this question, but because the first electric plane lesson, I went back to read a book, "CSS Design Guide" There is a special chapter on the removal of several methods of floating, but the time is tight, I just read the book again, and did not hit with the hand. So when I asked, I had a list of 1234.
  1, Clear:both;
  2, Overflow:hidden;
  3. Floating parent Element
  4. Add a floating element after the floating elements.
  Later, the interview sister, added, "You look at this horizontal navigation bar, is definitely a floating implementation, then he certainly can not use overflow:hidden; this, should be in case of this when the row bar has a submenu, that does not see,, how to solve it?"
  What I was answering was to add a floating element behind the floating elements, and the interviewer didn't say right or wrong,
  Whether it is right or wrong, or need to do a navigation, you know.

Before I wrote a note on floating principle here, today, I'll write another note about the removal of floats, from the CSS Design guide book.

• The impact of floating

• The performance of modern browsers
  Placing two adjacent inline elements, if the element in the second row is set to float left, the display of the row will be modified to block, but its size will be based on the setting or the size of its contents. Does not occupy the entire line of space, next to the inline element, will be in this row after the floating element, and will not be equal to the floating element.
  But if it is next to a set width inline block-level element, then this inline block-level element will also be behind the floating element.
  If a block-level element is next to it, the block-level element occupies the space of the element within the row that sets the float.
  If I say why, I can't say it.

• In IE7 and previous versions of IE browser
  It is not even more strange that the inline element next to the floating element will be underneath another line.

• After a block-level element floats
  The browser takes back the space that the block element originally occupies, and the element that follows it will be lifted up to the same level as the floating element, as space allows. The set of floating block-level elements itself retains its original position, silently watching the elements change as he affects them.
  The bounding rectangle of the parent element of the floating element is also shrunk to a child element within the parent element that does not have a float set.

• After the inline element floats
  In fact, this seems to be in my current practice did not see this set, but he did bring a different experience.

As for the floating of the elements in the line, I did not encounter the source code of other websites, so I put it first.

• The next step is to surround the floating elements of several methods, and the adaptation of each method of the occasion.

• Simply add a child element to the HTML tag and apply the clear attribute to it.

    <section >            <p>it s fun to float</p>< C3/><p style= "Clear:left;" ></p>  </section> <footer> Here is the      footer element.  </footer>

• But if, in particular, we don't want to add this purely expressive element, we can use CSS to add this clear element. To add a class to a section:.clearfix

  . clearfix:after{  content: '. ';  Display:block;  height:0;  Visibility:hidden;  Clear:both;}

• Method One: Add the parent element: Overflow:hidden
  This method forces the parent element to enclose the floating child element.
  In fact: the real purpose of the Overflow:hidden declaration is to prevent the inclusion element from being large. After applying Overflow:hidden, the containing element retains its set width and height, while the oversized word content is cut off by the container. In addition, Overflow:hidden also has a role, that is, it can reliably force the parent element to contain its floating child elements.
  However, the result is that the word content will not be visible once it exceeds the set width.

• Method Two: floating the parent element at the same time
  In fact, this for the entire site layout is not clear floating, but so that the parent element surrounded by the floating child elements, but the parent element floating around the floating child elements, but did not solve the parent element of its own floating on the entire site layout of the impact, I see some of the site's source will still like to use this method, Then surround the outside of the floating parent element with a parent element and set the width and height to ensure that it does not affect the layout of other content in the page.

• Method Three: add non-floating purge elements
  is to add a non-floating child element to the end of the parent element, and then clear the floating of the child element.
  However, there are two ways to add a child element as a purge element at the end of the containing element.

All three of these methods are implemented using the parent element, enclosing the floating child elements.
Analyze these three methods:
1. You cannot apply Overflow:hidden on top-level elements of a drop-down menu, otherwise the drop-down menu as its child element will not be displayed.
2. You cannot use floating parent element technology for an element that is centered on an automatic margin, otherwise he will not be centered.
But what if there are no parent elements on some occasions?
I would certainly say, add a chant, no trouble, but this will increase the traversal depth,
If an element wants itself to be affected by a floating element, and does not want his subsequent elements to be affected by this floating element, you can add a block-level element inside the element, and then clear the float for this block-level element, and it is important to note that this element must not be set to its own extra height, Otherwise the effect will not show up, I hope to see this article of the people of the amiable test.

"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial