css布局之浮动
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> 
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间．
相关推荐
drdrsky 2020-06-13
ThikHome 2020-06-05
vavid 2020-05-30
CSSEIKOCS 2020-05-19
xiaohuli 2020-02-23
葉無聞 2020-02-03
wangjie 2019-11-30
AnyBisks 2019-11-16
csscode 2019-09-07
aiolos 2018-09-27
陈浩 2019-07-01
Phoebe的学习天地 2019-07-01
juzhengqian0 2019-06-30
yibawuqing 2019-06-30
沉着前进 2019-06-29
yezi 2019-06-29
懵懂听风雨 2018-09-27