The first two articles show that typography is too restrictive to just follow the standard flow, and the float property in CSS is described next.
One, the float of the box (float)
1. floating (float) The main function is to help the object in the Web page alignment, with different commands to make the object floating around until the border, padding, margin or other object edge encountered. Do not look at this simple floating, but can for our layout design a variety of beautiful style.
The previous data describes that in a standard flow, a block-level element automatically stretches in the horizontal direction until the bounds of the element that contains it, and in the vertical and sibling elements are arranged in order, not by side. Block-level elements behave differently after you use the float method.
In CSS, there is a float property, which defaults to none, which is typically the case with standard flow. If you set the value of the float property to left or right, the element will be close to its parent element, at the same time, and by default the width of the box is no longer stretched, but is determined by the width of the contents of the box. Case diagram:<! DOCTYPE HTML ><meta charset= "UTF-8" > <title>float properties </title><style type= "Text/css" >body{margin:15px;font-family:Arial;font-size:12px; }. Father{Background-color:#ffff99;Border:1px solid #111111;padding:5px; }. Father Div{padding:10px;margin:15px;Border:1px dashed #111111;background-color:#7FFFD4; }. Father P{Border:1px dashed #111111;Background-color:#ff90ba; }. Son1{/*here to set the floating mode of Son1*/}. Son2{/*here to set the floating mode of Son1*/}. Son3{/*here to set the floating mode of Son1*/}</style>3</div>
In <p>css, there is a float property, which defaults to none, which is typically the case with standard flow. If you set the value of the float property to left or right, the element will be close to its parent element, at the same time, and by default the width of the box is no longer stretched, but is determined by the width of the contents of the box. </p>
</div>
</body>
The above code defines 4 <div> blocks, one of which is the parent block, and the other 3 is its child block. For the sake of observation, each block is added with a border and a background color, and a margin value is given between the <body> tag and each div. If the 3 sub-Div does not have 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 and is arranged in a vertical direction.
：
(1) Try to set the div with the "son1" category selector to left floating:
. son1{/* Here's how to set the Son1 float * /
float:left;}
：
You can see that the text of box box 2 in the standard flow is arranged around box 1 , where the width of box 1 is no longer stretched, but the smallest width of the content is accommodated.
Determine the box Box 2 range is due to box box 1 out of the standard flow, and the standard flow box Box 2 will be top to the original box box 1 position, so the left border of box box 2 coincides with the left border of box box 1 .
(2) Try to set the div with the "son2" category selector to left floating:
. Son2 {/* here to set the floating mode of Son2 */float:left;}：
Explanation: Because box box 2 also changes to the width of the content, and the box Box 3 of the text around the box box 2 arrangement. It can be clearly seen that box box3 left border is still in box box 1 left frame, otherwise box box 1 and box box 2 blank is not dark, the dark color is actually The background color of box box 3, the Gap between box box1 and Box 2 is made up of the margin of the two.
(3) Try to set the div with the "son3" category selector to left floating:
. Son3 {/* here to set Son3 floating mode */float:left;}：
It is clear that the range of the box where the text is located, and the text will be arranged around the floating box.
(4) to try, set the div with the "son2" category selector to the right float and set the div with the "son3" category selector to left floating.
. Son2 {/* here to set the floating mode of Son2 */float:right;} . Son3 {/* here to set the floating mode of Son3 */float:left;}：
Just Swap box box 2 and box box 3 for position.
Then try to narrow the browser window slowly, when the browser window cannot hold box box 1 to box 3 , then box 3 will be squeezed into the next line, but still remain floating, Will go to the left end of the next line, and the text will still be arranged automatically.
(5) Try the Box box 1, Box box2, Boxbox 3 are set to the left float, in "boxbox 1" Add a layer of text. The result is Box-3 will be squeezed to the next line, then it will be under the Box-1, or Box-2 below it? Look first :
Three red thick solid lines are drawn, which is the actual Split line of box box 2 and Box Box 3. Box Box 3 will be squeezed to the next line and move to the left, found box box 1 is higher than box box 2 , so that box Box 3 will be stuck, so stay in Below box Box 2 .
As you can see from the above, if a box is set to float, it will be out of the standard stream, and the boxes in the standard stream behind it will no longer be affected by it.
(6) Use the Clear property to clear the effects of floating
(1), clear attribute syntax: Clear:none, left, right, both (2), clear parameter Value description: None: Allow floating objects on both sides both: floating objects are not allowed. Floating objects on the right are not allowed
If you want to keep the left and right sides of the text around the floating box. Start by changing the box box 1 to box 2 to Float:left, while box box 3 floats to float:right, then the box Box 3 The content is modified to:
<div class= "Son3" > box-3<br> box-3<br> box-3<br> box-3</div>
：
If you don't want the text to wrap around a floating box, you can modify the <p> label style as follows:
{ border:1px dashed #111111; background-color:#ff90ba; Clear:left;}：
As can be seen above, the upper border of the paragraph moves downward until the text is not affected by the two boxes on the left, but is still affected by box Box 3 .
Because box Box 3 is relatively high, if you do not want box box 3 affected can be modified <p> label style, as follows:
{ border:1px dashed #111111; background-color:#ff90ba; Clear:right;}：
*
* * The clear attribute is mainly placed in the box where the text is located, such as the CSS setting of a P-paragraph, rather than the setting of the floating box.
(7) The float of the box
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
