Home > Developer > Web Develop
DIV + CSS block box floating design, divcss Block Floating
You can use absolute positioning to implement page layout. However, because the location of other blocks does not change when you adjust a block box, this is not the preferred layout method. However, you can use a floating block box to move left or right until its outer edge hits the border containing its block or another floating crazy border. Because the floating box is not in the normal stream of the document, the block boxes in the normal stream of the document behave as if the floating box does not exist.
This article summarizes several simple examples of block box floating:
1. Sorting without floating block boxes
<Html>
2. Float the right of the first blockRedefinition # one selector. You only need to add one line of code:
#one{float:right;background:red;}
The running result is as follows:
3. Set the first float to the left
To make everyone see the effect, you must adjust the size of the three blocks, so you can directly re-write the code.
<Html>
Running result:It is not hard to see that box (2) is overwritten by box (1. Only the 40px width is displayed. Because the box (1) is floating, it does not belong to the file stream range, which is equivalent to its original position being empty, so the box (2) is naturally supplemented.
4. Set the three boxes to float to the left.
Add the following code to div {} in Example 1:
float:left;Running effect:
5. Set the three boxes to the left (insufficient space)
You only need to modify the size of the three blocks.
<Html> Running result:If there is not enough space, the block will be automatically moved down.
6. The third block is stuck by the first block"
Block 3 does not have enough space on it. When you move down the block 1, the more part of block 3 will automatically block the movement of Block 3.
Finally, we will introduce an attribute: clear (clear attribute to specify whether an element can float beside it)
clear:none;clear:left;clear:right;clear:both;There are several values corresponding to different cleanup effects. Flexible use of this attribute can solve many problems.
Floating list in div boxThis is because li uses left floating.
Solution:
Method 1: Add "display: inline-table" To The mid3 style;
The complete code is as follows:
<Style type = "text/css">
# Mid3 {
Border: 2px dotted;
Width: 1078px;
Margin: 0px auto;
Display: inline-table;
}
# Mid3 ul li {
Float: left;
List-style: none;
}
</Style>
</Head>
<Body>
<Center>
<Div id = "mid3">
2222
<Ul>
<Li> 11 </li>
</Ul>
</Div>
</Center>
</Body>
Method 2: Add float: left in The mid3 style;
The complete code is as follows:
<Style type = "text/css">
# Mid3 {
Border: 2px dotted;
Width: 1078px;
Margin: 0px auto;
Float: left;
}
# Mid3 ul li {
Float: left;
List-style: none;
}
</Style>
</Head>
<Body>
<Div id = "mid3">
2222
<Ul>
<Li> 11 </li>
</Ul>
</Div>
Why does the text in the block not fluctuate after I add a float to a DIV in CSS?If the three divs are arranged up and down, and the third divs are added with float: right;, the third divs only float to the right of the page, not to any div.
You float the div, and the text in it will not float. You can use the text-align attribute to control the text in the div:
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
