css布局之浮动

刘朝雪

浏览: 83615 次
来自: 河北

最近访客更多访客>>

chaohu43

feixiongzaixian

poppinhai

nanber1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css html

　　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>

(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>

框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>

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间．

二clear属性

clear属性规定元素的哪一侧不允许其他浮动元素。如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

可能的值

left 在左侧不允许浮动元素。

right 在右侧不允许浮动元素。

both 在左右两侧均不允许浮动元素。

none 默认值。允许浮动元素出现在两侧。

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

两浮动和清除浮动的结合

<!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;clear: both">
    b
</div>
<div style="background: fuchsia;height: 400px;">
    c
</div>
</body>
</html>