Home > Article > Web Front-end > CSS Layout Floating (1)

CSS Layout Floating (1)

黄舟Original: 2016-12-17 11:48:431245browse

CSS floating has always been a depressing problem. Many layout problems arise from floating, especially when there are a lot of floating columns. But in fact, as long as you understand the floating of a two-column structure, you can face floating of multiple columns. You will no longer panic, because the left and right floating of the two-column structure is the most basic floating, and it is also the basis for more floating. The floating of three columns, four columns, etc. are all based on this.

Let’s take a look at some common CSS two-column floats. The CSS code can be found in the following categories. The HTML structure code is as follows:

< ;head>

CSS float

I started on the left, then maybe to the right< /div>

I was on the right at first, but later I might go to the left

The left side is fixed width and the right side is adaptive:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00;}

When you need to have a fixed width on the left side and automatic width on the right side, you only need to set the a object to Just float it to the left. The b object occupies the entire width of the screen by default, but because a floats left and occupies a width of 200PX, b is automatically located behind a.

Of course there will be a problem, that is, when the content on the left is higher than the right, the height of the right will not increase accordingly, and when the content on the right is higher than the left, the content on the right will Stream to the bottom of the content on the left.

One way to solve this problem is to set a float for b. Of course, it does not mean setting a right float. If it is set to a right float, when the content on the right is less than the width of one line, a blank will appear in the middle of the left and right sides:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:right;}

When you set b to left float, you can solve the problem of blank space in the middle. But in the same way, when the content of b object is not enough for one line, a blank space will appear on the right side:

#a {float:left; width:200px; background:#aaa;}
#b{background:#f00; float:left;}

Of course there is another solution that has both ends, that is, setting the position of the b object from the left. This can achieve the purpose of floating and solve the problem of too much content in the b object flowing under the a object. ：

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

Fixed width on the right and automatic on the left:

Same as fixed width on the left and automatic on the right, fixed width on the right and automatic on the left can also be achieved:

#a{background: #f00; margin-left:200px;}
#b{float:right; width:200px; background:#aaa;}

If you follow the above code, you will find that this code cannot achieve right floating. The b object is displayed below the a object, and it is not displayed as the right side, fixed width, and left automatically as expected. Effect. Because of the HTML structure, floating DIVs should appear in front of non-floating DIVs. That is to say, if the above code is followed, then

… and

… should be reversed:

Start me It's on the right, and you may run to the left later

I started on the left, and then maybe on the right

Of course, you can also use CSS styles to adjust the floating order without changing the HTML structure. This is also the advantage of CSS. One, that is, you can complete the modification of the page without changing the original HTML structure:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

The above is the floating content of CSS layout. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS Practical Tutorial (3)Next article：CSS Practical Tutorial (3)

See more

CSS Layout Floating (1)

Related articles