CSS box floating, CSS box floating
In a standard stream, a block-level element automatically stretches horizontally until the boundary of the element that contains it. in the vertical direction, the element and the sibling element are arranged in sequence and cannot be arranged side by side. After the "floating" method is used, the block-level elements will behave differently.
CSS has a float attribute. The default value is none, that is, standard circulation.If you set the float attribute value to left or right, the element is tightened to the left or right of its parent element. By default, the width of the box is not stretched, it is determined by the width of the content in the box.
Prepare basic code
The nature of floating is complicated. Here we first create a basic page with the following code. The subsequent experiments will be based on the following code and add different codes based on different knowledge points.
<Html xmlns = "http://www.w3.org/1999/xhtml"> <Body> <div class = "father"> <div class = "son1"> Box-1 </div> <div class = "son2"> Box-2 </div> <div class = "son3"> Box-3 </div> <p> here is the text outside the floating Box, here is the text outside the floating box, here is the text outside the floating box, here is the text outside the floating box, here is the text outside the floating box, here is the text outside the floating box. </p> </div> </body>The code above defines four <div> blocks, one of which is the parent block, and the other three are its child blocks. To facilitate observation, the border and background color are added to each block, and the <body> tag and each div has a certain margin value. If none of the three sub-div settings are floating, It is the box status in the standard stream. In the parent box, the four boxes expand to the right, and are arranged vertically, for example.
Next we will start experimenting on this basis. Through some experiments in the column, we will be able to fully understand the nature of the floating box.
Tutorial 1: set the first floating div
.son1 { float: left; }For example, you can see that the text of Box-2 in the standard stream is arranged around Box-1,At this time, the width of Box-1 is no longer stretched, but can accommodate the minimum width of the content. At the same time, because Box-1 is out of the standard stream, the Box-2 in the standard stream will be at the original position of Box-1,Therefore, the Left Border of Box-2 overlaps with the Left Border of Box-1..
Experiment 2: Set the second floating div
Continue to set the float attribute of Box-2 to left. At this time, you can see that Box-2 also changes to determine the width based on the content, and arrange the text of Box-3 around Box-2. It can be clearly seen that the Left Border of Box-3 is still under the left border of Box-1, otherwise the blank between Box-1 and Box-2 will not be dark, this dark color is actually the background color of Box-3. The blank between Box-1 and Box-2 is composed of the margin of the two.
Experiment 3: Set the third floating div
Next, we also set Box-3 to float left, from which we can clearly see the range of the Box where the text is located, and the text will be arranged around the floating Box.
Experiment 4: Changing the floating direction
Change Box-3 to float to the right, that isFloat: right. The result is as follows.
We can see that Box-3 is moved to the rightmost end. The range of the text section Box is not changed, but the text is clipped between Box-2 and Box-3. At this time, if you gradually narrow the browser window, the browser window will not be able to hold Box-1 to Box-3 in a row, and Box-3 will be squeezed into the next row, however, the text remains floating to the right, and the text is automatically filled with space.
Experiment 5: Change the floating direction again
Change Box-2 to the right and Box-3 to the left. It can be seen that the layout has not changed, but Box-2 and Box-3 have switched positions.
Now, go back to the experiment and narrow the browser window slowly. When the browser window cannot accommodate Box-1 to Box-3 in a row, as in the previous experiment, a Box is pushed to the next place. Which of the following files is squeezed into the next row?The answer is written in HTML, that is, Box-3 will be squeezed into the next line., But still keep floating to the left, it will go to the left end of the next line, and the text will still be automatically arranged, as shown in.
Experiment 6: Move all to the left
Next we will set the three boxes to float to the left, and then add a row in Box-1 to make the height higher than the original one, as shown in.
So think about it. What will happen if we continue to narrow the browser window? Box-3 will be squeezed to the next line. Will it be under Box-1 or below Box-2? The answer is.
Box-3 is squeezed to the next row and moved to the left, and it is found that Box-1 is higher than Box-2, so Box-3 will be stuck, and then stay under Box-2. At last, it should be noted that if a box is set to float, it will be removed from the standard stream, and the box in the standard stream will not be affected.
Experiment 7: clear floating effects using the clear attribute
To make the left and right sides of the text move around the box at the same time. First, change the float from Box-1 to Box-2 to float: left, while the float from Box-3 to float: right, and then change the content of Box-3:
<div class="son3"> Box-3<br> Box-3<br> Box-3<br> Box-3</div>The effect is as follows:
What should I do if I don't want the text to move around the floating box? After modifying the <p> style of the label surrounding the text, we can see from the following that the upper boundary of the paragraph is moved down until the text is not affected by the positions of the two boxes on the left, but it is still affected by Box-3.
.father p { border:1px dashed #111111; background-color:#ff90ba; clear:left;}Next, set the clear attribute to right, and you will see the following results. Because Box-3 is relatively high, the impact on the right is cleared, and the left is not affected. It can also be noted that the clear attribute can be set to both to directly eliminate the influence of floating boxes on both sides.
Lab 8: extend the height of the box
For the application of clear, here is another example to delete the <p> label of the section where the text is located. In this case, there are only three floating boxes in the parent div, they are not in the standard stream. The browser displays the following results:
As you can see, after a text section is deleted, the range of the parent div is reduced to one, which consists of padding and border. That is to say, the range of a div is determined by the standard stream content in it and is irrelevant to the floating content in it. The following describes a method to enable the parent div's range to contain three floating child Divs. For details, see the modified HTML code and the corresponding HTML code.
<Div class = "father"> <div class = "son1"> Box-1 <br> Box-1 </div> <div class = "son2"> Box-2 </div> <div class = "son3"> Box-3 <br> Box-3 <br> Box-3 <br> Box-3 </div> <div>Note: This blog is originated from Chapter 4 in CSS design thorough research. The examples in this book are concise and easy to understand. Therefore, we will share this article with you, at the same time, it is also easy for you to view online.
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
