css布局之浮动

xuhaidady 2015-12-15

   CSS布局中说到浮动,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动

框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

一float属性的定义和用法

       float属性:设置元素浮动

       可能的值:

       none 不浮动,在文档流内,默认

       left  左浮动,脱离文档流

       right 右浮动,脱离文档流

       inherit 规定应该从父元素继承 float属性的值。

(1)三个不浮动元素的图示和效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: peru;height: 200px;width: 300px;">
    a
</div>
<div style="width: 300px;background: palevioletred;height: 200px;">
    b
</div>
<div style="background: fuchsia;height: 200px; width: 300px">
    c
</div>
</body>
</html> 

css布局之浮动

(2)第一个元素向右浮动的图示和效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: peru;height: 200px;width: 300px;float: right">
    a
</div>
<div style="width: 300px;background: palevioletred;height: 200px;">
    b
</div>
<div style="background: fuchsia;height: 200px; width: 300px">
    c
</div>
</body>
</html>
 

css布局之浮动
 框a向右浮动分离文档流;框b占据框a原来的位置.

(3)设置三个元素均向左浮动的图示和效果:
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div style="background: peru;height: 200px;width: 300px;float: left">
    a
</div>
<div style="width: 300px;background: palevioletred;height: 200px;float: left;">
    b
</div>
<div style="background: fuchsia;height: 200px;width: 300px;float: left">
    c
</div>
</body>
</html>
 
css布局之浮动
 如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间.

相关推荐