浮动布局：之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。所以我们需要采用浮动布局。
在浮动布局中，有向左浮动，即所有的浮动标签都向左靠拢对齐，当一行空间不够时，后面的标签被挤到下一行。所以建议，在开发中如果在一行使用了浮动布局那么可以用一个空的div来隔开，浮动标签和后面的标签，从而避免出现覆盖的问题，空div标签的css可以这样写 clear:both; 而不需要声明高宽等属性。
浮动布局的对立面是流动布局，流动布局跟左右相邻元素关系密切，而浮动布局能够让对象脱离左右相邻元素，在包含框内向左或向右浮动显示，但是浮动元素不能脱离文档流，依然受文档流的影响。默认情况下任何元素都不具有浮动性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
*{
margin:0px;
}
#d1{
width:100px;
height:100px;
float:left;
background:blue;
}
#d2{
width:200px;
height:200px;
float:left;
background:red;
}
</style>
</head>
<body >
<div id="d1"></div>
<div id="d2"></div>
</body>
先用代码说明一下什么是浮动布局。
float3.png
当浮动布局和流动布局混在一起呢？下面代码中d3是普通的流动布局。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
*{
margin:0px;
}
#d1{
width:100px;
height:100px;
float:left;
background:blue;
}
#d2{
width:200px;
height:200px;
float:left;
background:red;
}
#d3{
width:400px;
height:400px;
background:yellow;
}
</style>
</head>
<body >
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
float4.png
显然d3被遮住了。以上现象原因解释：浮动使元素脱离了左右相邻元素，正常的文档流中丢失了它的位置。父元素在高度自适应的情况下，由于浮动丢失了子元素的高度，父元素就无法被撑开，所以导致父元素的背景、边框等属性无法生效，也会使后面的元素顶上来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>这里是标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
</script>
<style type="text/css">
*{
margin:0px;
}
#d1{
width:100px;
height:100px;
float:left;
background:blue;
}
#d2{
width:200px;
height:200px;
float:left;
background:red;
}
#d3{
width:400px;
height:400px;
background:yellow;
clear:left;
}
</style>
</head>
<body >
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
float5.png
以上是浮动布局最简单最直观的认识。
以下是浮动布局特征：
一、浮动布局以块状显示，可以定义width和height属性。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span{
width: 400px;
height: 200px;
border: solid red 1px;
}
#inline img{
width: 100px;
}
#float{
float: right;
}
</style>
</head>
<body>
<span id="inline">行内元素流动显示
<img src = "mysite.jpg"/>
</span>
<span id="float">行内元素浮动显示</span>
</body>
</html>
floatSpan.png
第2个span元素被定义为浮动布局之后，该元素自动以块状显示，因此span元素定义的宽和高有效。而第一个span元素由于是行内元素且没有浮动显示，所以定义的宽和高无效，所看到的红色边框仅包裹在行内元素的外边。
二、浮动元素与流动元素可以混合使用，都遵循先上后下显示规则，都受到文档流的影响。但是浮动元素能够改变相邻元素的显示位置，可以向左或向右并列显示。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#contain{
width: 700px;
height: 400px;
border: solid green 1px;
}
span{
width: 400px;
height: 200px;
border: solid red 1px;
}
#inline img{
width: 100px;
}
#float{
float: right;
}
</style>
</head>
<body>
<div id="contain">
<span id="inline">行内元素流动显示
<img src = "mysite.jpg"/>
</span>
<span id="float">行内元素浮动显示</span>
</div>
</body>
</html>
屏幕快照 2018-01-13 下午5.14.37.png
三、浮动元素仅能改变水平显示方式，不能改变垂直显示方式，依然受文档流的影响。流动元素总会以流动的形式环绕浮动元素左右显示。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width:400px;">
<div style="float:left; clear: both;" align="center">
<img src="mysite.jpg" width="120" alt="" hspace="8"><br /> 图像标题
</div>
CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局
</div>
</body>
</html>
pic.png
四、浮动元素可以并列显示，如果包含框宽度不够，则会错行显示。
网友评论