css布局之浮动

最新推荐文章于 2024-07-12 20:49:16 发布

iteye_7121

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量72

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/iteye_7121/article/details/82645081

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

　　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>

iteye_7121

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局之浮动

　　CSS布局中说到浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动　　框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。一float属性的定义和用法 float属性：设置元素浮动可能的值： none 不浮动，在文档流内，默认 left 左浮动，脱离...
复制链接

扫一扫