CSS positioning mechanism
1. The normal stream (stream standard)
By default, the element automatically from left to right, are arranged from top to bottom
Block elements wherein:
- Exclusive line
- Width and height may be provided
- If the width is not set, the default width of the container 100%
- Common block elements: div p h1-h6 ul ol li dl dt d
Wherein the inner row of elements:
- Display and other elements counterparts
- Width and height can not be set
- Width and height is the text or image width and height
- Common inline elements: span abiu em
2. Floating
Floating foundation
- Element will move left or right, the left and right only, not up and down
- Comprising a float box or other touch floating frame, floating stop
- Elements after the floating element will surround it, are not affected before
- Will float off the standard flow
The basic syntax: float: left | right | none
Example: The following code
<!DOCTYPE HTML> <html> <head> <title>测试页面</title> <style> .container{ width:200px; height:600px; border:2px solid #333; } .box1{ background-color: red; width:50px; height:40px; } .box2{ background-color: lightblue; width:50px; height:40px; } .box3{ background-color: pink; width:50px; height:40px; } </style> </head> <body> <div class="container"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </div> </body> </html>
Box1 add to float
float:left;
Visible, box2 gone, because, to add box1 left floating, it will flow out of the document, resulting in the box1 box2 went to the original position, is blocked box1
The box1 to the float floating right, to the following figure
Now, while giving three left floating Box Set
.box1{ background-color: red; width:50px; height:40px; float:left; } .box2{ background-color: lightblue; width:50px; height:40px; float:left; } .box3{ background-color: pink; width:50px; height:40px; float:left; }
Results are as follows
Show lateral effect is achieved, the principle is: the floating box set will find its parent element side, and provided also behind the two floating, floating in front of the box but encountered floating stop
At the same time set the right float
Problems after using the float: height collapse
For example: to set the parent container vessel highly adaptive, and left floating so Box1
.container{ width:200px; /*height:600px;*/ border:2px solid #333; } .box1{ background-color: red; width:50px; height:40px; float:left; } .box2{ background-color: lightblue; width:50px; height:40px; /*float:right;*/ } .box3{ background-color: pink; width:50px; height:40px; /*float:right;*/ }
Visible because Box1 out of the container, the container height of only two Box propped up, so the height of only two boxes of the parent container
Now, three boxes are set to float left:
Visible, container height has gone, there was a high degree collapsed, floating overflow problem
Add a box in the lower portion of the outer container
<!DOCTYPE HTML> <html> <head> <title>测试页面</title> <style> .container{ width:200px; /*height:600px;*/ border:2px solid #333; } .box1{ background-color: red; width:50px; height:40px; float:left; } .box2{ background-color: lightblue; width:50px; height:40px; float:left; } .box3{ background-color: pink; width:50px; height:40px; float:left; } .box4{ background-color: green; width:200px; height:400px; } </style> </head> <body> <div class="container"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> </div> <div class="box4">box4</div> </body> </html>
It found, newly added to the above case pushed, and the content of the above overlap
How to remove floating?
语法： clear:none|left|right|both;
Set elements float will affect other adjacent elements, requires the use of clear float clear, clear only affect themselves, it will not affect other adjacent elements
Example:
Original effect
Add to Clear box1 left floating without any changes, because it is clear only have an effect on their own, left itself no other elements box1
Clear box1 left to float
You can see, box2 and box3 fell, clear float has no effect on Box3 to Box2, just because the left side of the element box3 of Box2, so just follow Box2 box3 fall together
Clear float common method
A. Use an empty element in the floating element
<div class="clear"></div>
.clear{ clear:both; }
原效果：
清除浮动
<!DOCTYPE HTML> <html> <head> <title>测试页面</title> <style> .container{ width:200px; border:2px solid #333; } .box1{ background-color: red; width:50px; height:40px; float:left; } .box2{ background-color: lightblue; width:50px; height:40px; float:left; } .box3{ background-color: pink; width:50px; height:40px; float:left; } .box4{ background-color: green; width:200px; height:400px; } .clearfix:after{ content:"."; display: block; height:0; visibility: hidden; } .clear{*zoom:1;/*触发hasLayout兼容IE6、7*/} .clear{ clear:both; } </style> </head> <body> <div class="container"> <div class="box1">box1</div> <div class="box2">box2</div> <div class="box3">box3</div> <div class="clear"></div> </div> <div class="box4">box4</div> </body> </html>
B.给浮动元素的容器添加 overflow:hidden
*zoom:1;/*触发hasLayout兼容IE6、7*/
例如：
.container{ width:200px; border:2px solid #333; overflow: hidden }
C:使用CSS3的:after伪元素
.clearfix:after{ content:"."; display: block; height:0; visibility: hidden; clear:both; } .clearfix{*zoom:1;/*触发hasLayout兼容IE6、7*/}
例如：
.container:after{ content:"."; display: block; height:0; visibility: hidden; clear:both; } .cintainer{*zoom:1;/*触发hasLayout兼容IE6、7*/}
清除浮动的其他方法
A.父级元素定义height，只适合高度固定的布局
B.父级元素也一起浮动，不推荐，会产生其他浮动问题
3.绝对定位
参见下一篇文章