Preparing the Base code
The nature of the float is more complex, here first make a basic page, the code is as follows. The following series of experiments will be based on the code below and add different new code based on different knowledge points.
The above code defines 4 <p> blocks, one of which is the parent block, and the other 3 is its child block. For ease of observation, the blocks are added with a border and a background color, and a margin value is given between the <body> tag and each p. If none of the 3 sub-p has any floating settings, it is the box state in the standard flow. In the parent box, each of the 4 boxes stretches to the right, arranged in a vertical direction, as in.
The following is the beginning of experiments on this basis, through a number of columns of experiments, you can fully understand the nature of the floating box.
Experiment one: Set the first floating p
. son1 { float:left; }As an effect, you can see that the Box-2 text in the standard flow is arranged around the Box-1, and at this point the width of the Box-1 is no longer stretched, but the minimum width of the content can be accommodated . At the same time, because the Box-1 is out of the standard flow, and the Box-2 in the standard flow will be top to the original Box-1 position, the left border of Box-2 is coincident with the left border of Box-1.
Experiment two: Set a second floating p
Continuing to set the float property of Box-2 to left, you can see that Box-2 also becomes the width determined by the content, and the Box-3 text is arranged around Box-2. It can be clearly seen that the left border of the Box-3 is still under the Box-1 left box, otherwise the white space between Box-1 and Box-2 will not be dark, this dark is actually Box-3 background color, the gap between Box-1 and Box-2 is composed of the margin of the two.
Experiment Three: set a third floating p
Next, we set the Box-3 to the left, where we can see clearly the range of the box in which the text is located, and the text will be arranged around the floating box.
Experiment four: Change the direction of the float
Change Box-3 to right, i.e. float:right. At this point the effect is as.
You can see the Box-3 moved to the far right, the text paragraph box has not changed the range, but the text is sandwiched between Box-2 and Box-3. At this point, if the browser window is slowly adjusted to narrow, the browser window will not be able to fit in a row Box-1 to box-3,box-3 will be squeezed into the next line, but still remain floating to the right, then the text will automatically fill the space.
Experiment Five: Change the direction of the float again
Change Box-2 to right and Box-3 to left. It can be seen that the layout has not changed, just Box-2 and Box-3 exchanged positions.
Now, back in the experiment again, slowly narrowing the browser window, and when the browser window cannot accommodate Box-1 to Box-3 in a row, a box will be squeezed to the next one as in the previous experiment. Which is the one that was squeezed to the next line? The answer is to write in the HTML in the back, that is, Box-3 will be squeezed into the next line , but still left to float, will go to the left side of the next line, then the text will still automatically arrange, such as.
Experiment Six: Move all left
The following 3 boxes are set to the left floating, and then add a line in the Box-1, so that it is higher than the original height, as shown in.
Consider, then, if you continue to narrow the browser window, what will happen? Box-3 will be squeezed to the next line, then it will be under the Box-1, or Box-2 below it? The answer is like.
Box-3 was squeezed to the next line and moved to the left, and found that Box-1 was taller than Box-2, so that Box-3 would be stuck and stay under the Box-2. Finally, it is important to note that if a box is set to float, it will be out of the standard stream and the box in the standard flow behind it will no longer be affected by it.
Experiment Seven: Use the clear property to clear the effects of floats
So that the left and right sides of the text surround the floating box at the same time. First, change the Box-1 to Box-2 to Float:left, and Box-3 float to float:right, then modify the contents of Box-3 to:
<p class= "Son3" > box-3<br> box-3<br> box-3<br> box-3</p>Effects such as:
What if you don't want the text to revolve around a floating box? When the following changes are made to the style around the label <p> of the text, as can be seen from the following, the upper boundary of the paragraph moves downward until the text is not affected by the two boxes on the left, but is still affected by the Box-3.
. Father P { border:1px dashed #111111; Background-color: #ff90ba; Clear:left;}Next, set the clear property to right, and you will see the following effect. Because the Box-3 is relatively high, so clear the influence on the right side, the natural left will not be affected. It is also stated that the clear property can be set to both, which directly eliminates the effects of floating boxes on the left and right sides.
Experiment Eight: Extend the height of the box
For the clear application, here is an example, the text is located in the paragraph <p> tag Delete, when there are only 3 floating boxes in the parent p, they are not in the standard flow, then the browser display the effect is as follows:
As you can see, after the text paragraph is deleted, the range of the parent p is indented into one, consisting of padding and border, that is, the range of a P is determined by the content of the standard flow inside it, regardless of the floating content inside. Here's a way to make the parent P range contain 3 floating sub-p, as shown in the following modified HTML code, and corresponding to it.
<p class= "Father" > <p class= "Son1" >Box-1<br>Box-1</p> <p class= "Son2" >box-2 </p> <p class= "Son3" > box-3<br> box-3<br> box-3<br> Box-3 </p> <p style= "clear:both;border:0;padding:0;margin:0;" ></p></p>
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
