Home > Developer > Web Develop
Xin Xing helps you solve the floating problem in CSS. Xin Xing css
Float is a must for CSS layout. If you are not familiar with float, the CSS layout is like a castle in the air. When it comes to float, it is more like combining div, div is a block-level element. As described in my previous blog, if you like my style, you can search for it.
Next let's go to the topic. The so-called float can be defined by the css attribute float. For example, float: left is the float to the left, and float: right is the right floating, let's look at a non-floating example first. The first is the html file, which is never moved. Its content is as follows:
<Html> Then, we will write the corresponding my.css file. The content is as follows:#demo1{background-color: #933;height: 100px;width:300px; }#demo2{background-color: #0F0;height:60px;width:200px;}#demo3{background-color: #F00;height: 140px;width: 80px;}#demo4{background-color: #CCC;height: 80px;width: 180px;}The interface is as follows:Next, let's move it right in the second div and add the following message:
#demo2{float: right;background-color: #0F0;height:60px;width:200px;}I only show the changes to demo2, and then let's look at the following results:Next, let's talk about what is "normal stream". This may be a topic that will make new friends very confused. The so-called normal stream is like a book, from top to bottom, layout from left to right. normal HTML elements are in normal streams. Once an element floats, it is not in normal streams. For example, if Block 2 is floating on the right, it will look for an element above it. The element above it is Block 1, and block 1 is an element in a normal stream, block 2 is aligned with the bottom of Block 1. A normal stream determines its upper and lower positions. Floating can only determine its left and right positions. Once the upper and lower positions are determined, the next step is its left and right position. Because it is right floating, it is on the right. Block 3 finds its last element and finds that its last element is an element in the standard stream. Therefore, it is automatically aligned with the low-end of Block 1 and arranged downward.
Someone may ask, if Block 2 is left floating, we will change the float attribute of demo2 to left, and we will modify the width of Block 3 to make it wider, otherwise, the explanation is as follows:
The explanation I want is clear, so I will not explain it again. Someone may ask, what if the two blocks are floating together? Let's first look at the case where the right is floating:
Because the width here is wide enough, this layout can be completely put down, but what if we narrow the width? See the following illustration:
In fact, this is quite understandable. How can we continue to stretch to the left? The following situations may occur:
In fact, as long as the width is wide enough, block 3 is still on the left side of Block 2 rather than under it, but this is not the case if the width is too low, it reluctantly ran to the bottom of Block 2, and then started to arrange the line from the right.
In fact, the right float will be located, so the left float will be clear, and its effect is as follows:
In fact, if the space is too small, block 3 will also be squeezed into a new row, as shown in the following code:
Therefore, we can sum up the following sentence: "The browser first sorts the blocks in the normal stream. They are very simple and can be arranged from top to bottom. For floating elements, it will check which element is closest to the element above it in the normal stream, and regard its bottom as its top, and then sort it according to the floating rules. Because it is the first normal flow layout, floating elements will cover the elements in the normal flow ."
This section first introduces... Next, let's talk about the floating ....
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
