CSS基础（六）：浮动深入

bear_fish

发布于 2018-09-20 09:49:06

4000

发布于 2018-09-20 09:49:06

文章被收录于专栏：用户2442861的专栏用户2442861的专栏

参考了《CSS彻底设计研究》的文章，说的很不错，所以拿来做笔记。

浮动

在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。

CSS中有float属性，默认为none，也就是标准流通常的情况。如果将float属性设置为left或right，元素就会向其父元素的左侧或右侧紧靠，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来确定。

准备代码

先制作一个页面，然后再设置浮动进行分析。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</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:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
}
.son2{
/* 这里设置son1的浮动方式*/
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

设置第1个浮动div

可以看到标准流中的Box-2的文字在围绕着Box-1排列，此时Box-1的宽度不再伸展，而是能容纳下内容的最小宽度。那么Box-2的盒子宽度范围如何确定呢？用Firebug可以发现，是与Box-1的左边框重合，因为此时Box-1已经脱离标准流，标准流中的Box-2会顶到原来Box-1的位置，而文字会围绕着Box-1排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</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:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

设置第2个浮动div

将Box-2的float属性也设置为left，可以看到Box-2也变为根据内容确定宽度，并使Box-3的文字围绕Box-2排列。Box-2的盒子宽度

也是与Box-1的左边框重合，Box-1和Box-2之间的空白是由两者的空白叠加而形成的。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</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:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
float:left;
}
.son3{
/* 这里设置son1的浮动方式*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

设置第3个浮动div

可以看到文字会围绕浮动的的盒子排列。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</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:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
float:left;
}
.son3{
/* 这里设置son1的浮动方式*/
float:left;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>

改变浮动的方向

将Box-3改为向右浮动，可以看到Box-3移动到了最右端，文字段落盒子的范围没有改变，但是文字变成了夹在Box-2和Box-3之间。

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>float属性</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:#90baff;
    }
.father p{
    border:1px dashed #111111;
    background-color:#ff90ba;
    }
    
.son1{
/* 这里设置son1的浮动方式*/
float:left;
}
.son2{
/* 这里设置son1的浮动方式*/
float:left;
}
.son3{
/* 这里设置son1的浮动方式*/
float:right;
}
</style>
</head>
<body>
    <div class="father">
        <div class="son1">Box-1</div>
        <div class="son2">Box-2</div>
        <div class="son3">Box-3</div>
        <p>这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.</p>
    </div>
</body>
</html>