Home > Developer > Web Develop
Before the floating layout of the CSS is always smattering, the recent development used more, the use of it to make some summary, so that later can be found to forget. Haha, don't say my memory is not good, I say really, after all, the knowledge of the front end is more and miscellaneous, do more notes, encounter problems when the online search data is one, but I think more important is to put your problems and solutions recorded down. In this way, your development efficiency is how high. On the other, make some records of the float.
1. First, the Web page is a document flow, which is displayed by default, from left to right, from top to bottom, by block elements and cascading elements. Float floating elements, like floating on the document flow, do not occupy the position of the document Flow .
The following is a document page that does not make any floating:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <stylerel= "stylesheet">. Content{width:500px;Border:1px solid Red;background:Cornflowerblue;Height:400px; }. Boat{width:100px;Height:100px;background:Red;Border:1px solid #f7ffec; }. Nofloat{Height:50px;background:Yellow;Border:1px solid #195dff; } </style></Head><Body> <Divclass= "Content"> <Divclass= "Nofloat">I occupy a whole line of the parent</Div> <Divclass= "Boat">I'm a floating boat, not floating now.</Div> <Divclass= "Boat">I'm a floating boat, not floating now.</Div> <Divclass= "Boat">I'm a floating boat, not floating now.</Div> </Div></Body></HTML>
2. Next we float the boat and float right and left. The effect is as follows:
. Boat{ width: 100px; Height: 100px; background: Red; Border: 1px solid #f7ffec; float: left; }It is clear to see that floating elements float when the sibling element (sibling element) of the floating element is exclusive of one row or if the reserved space is insufficient. The float is relative, and is relative to its immediate parent element floats, as here, the. Boat is floating relative to the. Content, which can be used for responsive layout, relative to the percentage of the parent element's height. In addition, if you do not want to let the floating element not float in a row or adjacent, you can let the subsequent floating elements do not float to rely on the previously floated elements, what meaning? is if the boat 3 said the boat 1 and 2 is too bored, do not want to float behind his door, then he can tell God (the browser said) My left can not float, the code is:
. boat:last-child{ clear: left; }Note: Because these class names are the same, use. Boat:last-child to select the last DOM element and, of course, to set a different class name for the three boats.
The effect is as follows:
similarly: A floating element can add clear:left or right to the floating element on the right if you do not want it to be floating on its right. Note that it does not add to itself, but to the element that is next to you but which you want to kick off now. There is also can not let the left and right sides have floating elements, the use of Clear:both;
Summary of personal understanding, if there is a mistake, please correct me.
float float of CSS layout
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
