Home > Developer > Web Develop
How to clearly float (i)
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.
do not set the inner, outer and floating, when the child div container default left, then the child Div left is floating (float) inherit the properties of the browser, does not have the role of layout. Then we set this sub div container to float, let it reside left float:left; I found floating left float:left,
<body> <div class= "DIVCSS5" > <div class= "clear" ></div> <!--<div CLA ss= "Clear EFT" ></div> <div class= "Clear ight" ></div>--> </div> </bo Dy>
Float with margin property
and then I Margin-top : 10px, 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.
Then, now I delete margin-top:10px;, set top : 10px, found that the ordinate does not have an offset, that is, floating does not have a 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)
10px , suddenly found that the child div container shifted downward
continue in the sub-div floating State, set it to Position:relative, and then set it to Margin-left:10 px; The position of the child div container is seen horizontally to the right
that is, when giving the sub div The container sets the floating float:left, then setting the Margin-left will work, and setting top is not a function . The top can function in a floating state only when the Sub div container is set relative to the position position.so does it mean that left,top is in a relative position to 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 in It only works when the relative position 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 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 can 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.
This article is from the "Kosig" blog, make sure to keep this source http://kosig.blog.51cto.com/9218084/1911210
Div+css Floating Solution
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
