浮动 规则
CSS允许浮动任何元素,使用float属性来实现。浮动元素会从正常流中删除,不过他仍然会影响到布局。
首先要明确任何浮动元素都会生成一个块级框,不论这个元素本身是什么。浮动元素会从正常流中删除,对于一个非替换元素,若想使用浮动,需指定宽度width。
CSS2.1关于浮动的规则如下:
1.浮动元素的左(或右)外边界不能超出其包含块的左(或右)外边界。
2.为了防止浮动元素重叠,一个浮动元素的左(或右)外边界应当是其前面的浮动元素的右(或左)外边界,除非后出现的浮动元素的顶端在先出现的浮动元素的底端下面,如下图:
<div id="father">
<p>
This is a paragraph,my name is <em>ChengKang</em>,
my girl is <strong>PengKe</strong>.
</p>
</div>
p em,p strong
{
float:left;
border:1px solid black;
}
效果如下图所示:
可以发现后浮动的strong元素的左外边界是在先浮动的em元素的右外边界上(因为这里并没有设置其外边界属性,所以默认为0).
3.还是为了防止浮动元素重叠,左浮动元素的右外边界不会在其右浮动元素的左外边界,右浮动元素的左外边界不会在其左浮动元素的右外边及左边。比较绕口,看下实例:
<div id="father">
<img src="TU.jpg" alt="tupian" class="leftcls">
<img src="TU.jpg" alt="tupian" class="rightcls">
</div>
div#father
{
border:1px solid black;
background-color:silver;
width:800px;
}
img.leftcls
{
width:500px;
float:left;
}
img.rightcls
{
width