Home > Developer > Web Develop
Float floating "1" clear: both clear floating; "2" set parent element overflow: hidden to clear floating, "1" and "2"
<1>
Floating float<! DOCTYPE html>Figure 1
<2>
First clear floating: add an empty element and set its css style to clear: both;<! DOCTYPE html>Figure 2
Method 2: Set the overflow value of the parent element to hidden.<! DOCTYPE html>
We mentioned above that the floating clearance effect can be achieved by adding the overflow: hidden attribute to the parent element.So now we need to study what this overflow is?
Overflow is used to manage content that exceeds the specified height and width when the content of an element object exceeds the specified width.
Let's take the parent element and child element for reference:
Overflow has four values: visble, auto, hidden, and scroll.
Overflow: visble: indicates that when the content of a child element exceeds the height and width specified by the parent element, no part of the content that exceeds the limit is cut, do not add a scroll bar to the perimeter of the parent element to display the content of the child element that exceeds the limit (meaning: if it is too large, I don't care about you)
Overflow: auto: when the content of a child element exceeds the height and width specified by the parent element, add a scroll bar around the parent element to display the content of the child element that exceeds the limit.
Overflow: hidden: indicates that when the content of a child element exceeds the height and width specified by the parent element, the content of the child element that exceeds the limit is hidden (cut off). [This is what we need]
Overflow: scroll: indicates that the content of the element without a pipe does not exceed the specified height and width of the parent element. The content of the child element is displayed by adding a scroll bar around the parent element.
Please wait ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Problems caused by the use of overflow: hidden to clear floating and positioning Layout
That's the problem.
Now that we want to use overflow: hidden to clear the float and position the layout, we have already mentioned that if we use overflow: hidden to clear the float, it is difficult to implement the position layout. Why? Because when my child element locates outside the parent element, according to overflow: hidden, it hides the part where the child element exceeds the height and width of the parent element. See figure 2.
<! DOCTYPE html> Figure 1
---------------------------------------------------------------- Figure 2
The third method is to clear floating: after {clear: both...} the pseudo object above we mentioned that there is a problem of positioning layout when using overflow: hidden to clear floating. Now we can use another method to actually clear the floating effect, that is, the after pseudo object.When using location layout (position: absolute), we will not use overflow: hidden. We use another method
First, let's take a look at the role of the after () method in jquery: Add a sibling element to the end of yourself.
$ ("# Div1 "). after ("<span> China </span>"); // append the <span> China </span> label to the end of the $ ("# div1") element.Let's take a look at the Use and effect of the "after" pseudo object in css.
<Html>
Let's get down to the truth.
<Html xmlns = "http://www.w3.org/1999/xhtml">
Zookeeper
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
