Home > Developer > JavaScript
CSS clear float, css float
Today I saw an article about clearing the float, and suddenly my head was short-circuited. Why? Why is floating cleared? Forgive me for my ignorance. I searched for it and made up my original notes. Alas, there was a record and it was often used, I have forgotten how it works for a long time. Well, to prevent myself from making the same mistake again, I 'd better summarize it myself! The code is evidence!
1 <! DOCTYPE html> 2Well, various browsers run as follows:
Where the A-B-C is the child element in the I element, if there is no floating, they are arranged according to the standard document flow (Block-level elements from top to bottom, line elements from left to right ), a webpage needs a reasonable layout to attract users. We need to display more information in a limited space. Sometimes, a, B, and c are arranged in one row, I don't need Flexbox (elastic box layout) on the tall floor because IE8 and below are not supported. You have to ask me how to know. I 'd like to leave a website http://caniuse.com/home,self-searching for everyone! In additionInternet Explorer does not support VW and even the following units. Exercise caution when using IE! General situation
We don't need to set the width and height for the parent element, and we want to make it adaptive to the width and height. But what will happen after we add float: left to the child element? Let's talk with graphs:
Where is the parent element ?! Well, here I want to explain how floating works. For example, forgive me for being less imaginative. We think of the parent element as a box that can be automatically shrunk, when we keep putting a sub-box in it, it will be automatically opened and float will be added to the sub-element, this is equivalent to a child element floating on the parent box. Obviously, when the parent box is empty, the child element is automatically shrunk back. What we need to do now is to prevent it from shrinking back:
1. add overflow: hidden to the parent element. Well, I checked this method and it may be unfriendly to SEO, however, I do not have any experience in this field. Let's just explain it. I will try again later.
.wrapper{width:50%;background: cornflowerblue;border:2px solid black;overflow:hidden;}2. Add an empty div to the bottom of the child element
1 <body>2 <div class="wrapper">3 <div class="box1"></div>4 <div class="box2"></div>5 <div class="box3"></div>6 <div class="box4"></div>7 </div>8 </body>Box4 is the empty element we added. The specific expression of this empty element is as follows: (compatible ~ Compatible ~ Compatible ~ Internet Explorer 6 is not supported because people have the default minimum height)
1 .box4{clear:both;height: 0;overflow: hidden;}3. the pseudo-class selector is used to clear the floating. This method is used in my work. It has been tried and tested! (Sorry, I dug a hole for myself just now and it is still in the trap. I will try again ...)
.wrapper:after{clear:both;content:".";display:block;height: 0;overflow: hidden;visibility: hidden;}Well, it's like the above, content :'. '; display: block; is indispensable for the five browsers. visibility: hidden; allows the browser to parse it, but the user cannot see it.
Original article. For details, refer to the Source: snail bait on the road [http://www.cnblogs.com/wowoniuzailushang]
Published on: http://blog.csdn.net/wowoniuzailushang CSDN
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
