Known as a large div container, this container contains two sub-div containers, and then add a div after the two sub-div containers (this div means clear floating div container), the clear floating div container set CSS style to Clear:both, at this time, The interior of the large div tag (left and right sides/*css5*/) floats and clears.
If there is a large div container <div class= "DIVCSS5" > </div>, this large div contains a sub div container <div class= "clear" ></DIV> The Child div container sets a width, height, background color, does not set the inner, margin, and float, when the child div container defaults to the left, when the child Div left is floating (float) inherits the properties of the browser, does not have the function of layout. Then we set this sub div container to float, let it reside left float:left; I found that the floating left float:left is set, the Sub div container produces a float, and the Sub div container is a certain distance from the top of the large div container.
<body> <div class= "DIVCSS5" > <div class= "clear" ></div> <!--<div class= "clear EFT "></div> <div class=" Clear ight "></div>--> </div> </body>
Float with margin property
Then I margin-top:10px, the Sub div container on the original base of the move down the 10px distance, that is, the float will not affect the Margin-top property should be offset, the same does not affect Margin-left, margin-right, The offset that the Margin-bottom property should have.
Floating No Top,left,right,bottom property
Then, now I delete the margin-top:10px;, set top:10px to the Sub div container, and find that the ordinate does not have an offset, that is to say floating does not have the top property. Similarly there is no left, right, bottom attribute.
So, under what circumstances will the top, left, right, and bottom properties be set to float?
Floating with Top,left,right,bottom property (conditional set relative position position)
So, I gave the Sub div container relative position position:relative, and then set top:10px, suddenly found that the sub div container downward offset 10px.
Continue the floating state of the Sub Div, set it to Position:relative, and then set the margin-left:10px to it, and see that the Sub div container's position horizontally to the right has a 10px offset, similarly margin-top, Margin-right and Margin-bottom will change.
That is, when you set a floating float:left to a child div container, and then set the Margin-left to work, setting top is not useful. Only when the sub-div container set relative position position, top can be in the floating state, then it is not said that Left,top is in the relative position, can play a role? So now we do an experiment, I float:left;position:relative in the sub-div container, all of them are deleted, there will be no floating, there will be no relative position, and then write the top:10px;left:10px; the corresponding CSS code is as follows. Clear {width:200px;background: #f2e; color: #030617; height:20px;top:50px;left:10px;}; The result is that the child Div container has not moved anywhere in the horizontal or vertical axis, So it turns out that left and top are only working when the relative position of position is set. Margin is whether you set position and do not set position will work.
Continue floating above float, if the float is now set inherit; inherit the browser's floating property, at this point we look at the Sub div is not floating, default left. The same to the sub div set floating style None initial will not have a floating effect. Only the child Div container has left and right floats set, and the child div container will appear floating state.
How to clearly float (ii)
Below, we use one of the other methods to clear the floating, HTML code or the above code, the large container of the div CSS code:. divcss5{padding:10px 0;width:100%; left:50%;right:50%;background : #007CB5;}, the CSS code for the Child div container:. clear{width:200px;background: #f2e; color: #030617; height:20px;float:left;}, when you see a floating effect, The Sub div container floats above the large container, the same principle, I still use to clear floating clear:both; we can use CSS pseudo-elements: After, here is a very simple CSS code, to the parent container to write CSS pseudo-class, code:. Divcss5:after{content: "1"; clear:both;display:block; At this point, we see that the float of the large container is cleared, and the child div container is visible inside the large div container on the browser. Viewing the element on the browser, you can see that after is contained within the parent container, so after is the equivalent of adding a clear floating div to the parent container, just a div layer is missing, and this layer is implemented by. Divcss5:after.
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
