CSS know how much (9)--float Next

Float content more, we divided up, the next two articles to introduce, the previous article has been written, this is the next article. Suggest that we first read the previous article, and then look at the following, wonderful content do not skim ah.

1. Clear float

As we mentioned in the previous article, float is "destructive" and it causes the parent element to "collapse", which is not what you want to see. How do you avoid this effect of float (which is what we often call "clear float")? There are many ways, I am here to introduce 4 for your reference, we can choose according to the actual situation.

Let's introduce two simple, but less common workarounds:

1. Add Overflow:hidden to Parent element
2. Floating parent Element

These two methods are relatively simple, here also no longer demonstrated, we are interested can try it yourself.

The third method is not very common, but you need to know clear:both this thing. By adding a clear:both element underneath all the floating elements, you can eliminate the destructive nature of float.

　　

The next fourth method is everybody most need to master, also I recommend, also is Bootstrap is using--clearfix--don't know the classmate must go to search, otherwise too low!

　　

, we define a. Clearfix class, and then apply this style to the parent element of the float element, which is very simple? Note that you may be searching for different versions of Clearfix, some code is more than the code in, you do not have to ignore it, just follow the code of my map to write the line.

The principle, in fact, is through the pseudo-element selector, after the div added a clear:both element, with a third method is a truth.

2. Reasonable use of Float layout page

As mentioned in the previous article, we use float as a Web page layout, which is a misunderstanding and "misuse". It is estimated that most people misunderstand the original design of float, but the "misuse" here is quoted because it is an unintentional application. That is, it is reasonable to use float to make a Web page layout, encouraging comrades to continue to use it.

But using float as a Web page layout also has many tricks, and accurate application will improve the flexibility of the Web page. Below I list two commonly used page layout case, only for everyone reference, do not like to spray, good-natured message!

　　

First, three-column layout

The homepage of the blog Park is a classic three-column layout, which is obviously left, middle, and right.

　　

For this layout, the layout scheme I gave is:

　　

Second, two-column layouts

As an example of a blog post, it is divided into left and right structures

　　

For the format of this layout, my design is:

　　

3. Bootstrap's grid system

If you are familiar with and use bootstrap, then you will not have to worry about the layout of the page, because Bootstrap has divided the page into 12 columns, you can set up a multi-column layout, very convenient. This is the bootstrap grid system. The grid system is not explained here, simply look at the implementation of the grid system, it is implemented with float.

　　

By monitoring the CSS style of each cell through a browser, you can see that the cell has a width set by a percentage and the float is set by Float:left.

　　

For the parent element of the clear floating, bootstrap use is in the "last article" said Clearfix, you can test it yourself.

More look at the classic software source code is a shortcut to learning, learning CSS can see bootstrap, learn JS can look at jquery ...

4. Summary

Float content is very many, some CSS books, it is difficult to fully explain the float this knowledge point of the whole content. This needs to read more books, many practice, a lot of classical system to see the source code, to achieve mastery, to give an anti-10.

Let's share it.

CSS know how much (9)--float Next