How much do you know about css (9)--float Part 2_html/css_WEB-ITnose

Float has a lot of content. Let’s introduce it in two parts. The first part has been written and this is the next part. It is recommended that you read the previous part first, and then read the following part. Don’t skim the exciting content.

1. Clear float

We mentioned in "Part 1" that float is "destructive" and will cause the parent element to "collapse", which is not what you want to see. How to avoid this impact caused by float (that is, what we often call "clearing float")? There are many methods. I will introduce 4 here for your reference. You can choose according to the actual situation.

Let’s first introduce two relatively simple but uncommon solutions:

1. Add overflow:hidden to the parent element
2. Floating parent element

These two methods are relatively simple and will not be demonstrated here. If you are interested, you can try them yourself.

The third method is not very commonly used, but everyone needs to know clear: both. You can eliminate the destructive nature of float by adding a clear:both element below all floated elements.

 

                                                                                                                                                                                                   Students must search for it, otherwise it will be too low!

​

In the above picture, we define a .clearfix class, and then apply this style to the parent element of the float element. Very simple, right? Note that you may search for different versions of clearfix, and some codes are more than those in the picture above. You don't need to pay attention to them, just follow the code of my texture.

The principle is to use a pseudo-element selector to add a clear:both element after the div, which is the same as the third method.

2. Reasonable use of floats to lay out web pages

As mentioned in "Part 1", it is a misunderstanding and "misuse" that we use floats for web page layout. It is estimated that most people have misunderstood the original design intention of float, but the "misuse" here must be in quotation marks, because this is an unintentional application. That is to say, it is very reasonable to use float for web page layout, and comrades are encouraged to continue to use it.

But there are many techniques for using float to layout web pages. Accurate application will improve the flexibility of web pages. Below I list two commonly used web page layout cases for your reference only. If you don’t like it, please don’t comment, please leave a kind message!

　

First, three-column layout

The homepage of Blog Park is a classic three-column layout, obviously left, center and right.

　　

　　For this layout, the layout plan I gave is:

　　

　Second, two Column layout

Taking the link of an article in the blog park as an example, it is divided into left and right structures



For this layout format, my The design plan is:

　

3. BootStrap’s grid system

If you are familiar with and use bootstrap, then you don’t have to worry about the web page layout yourself, because bootstrap has divided the web page into 12 columns. You can set up multi-column layout as you like, which is very convenient. This is bootstrap’s grid system. I will not explain the grid system in detail here, but simply look at the implementation of the grid system, which is implemented using float.

　　　

　Monitoring the CSS style of each cell through the browser, you can find that the cell has a width set by percentage and a float set by float:left.

　

　For the clear floating of the parent element, bootstrap uses the clearfix mentioned in "Part 1". You can check it yourself and try it.

Looking at the source code of classic software is a shortcut to learning. To learn css, you can look at bootstrap, and to learn js, you can look at jquery...

4. Summary

There is a lot of float content, some In CSS books, it is difficult to comprehensively explain all the content of float. This requires you to read a lot of books, practice a lot, and read a lot of source code of classic systems in order to achieve a comprehensive understanding and draw inferences from one example.

Let’s encourage each other.