float浮动对文本元素排版影响
2017-03-09 本文已影响0人
yongzhan
本文主要解释float元素对文字图片的排版影响。
在css中有一个常见的图文环绕效果。实现方式主要是将图片左浮动，或者右浮动。其相邻的文字，就会环绕图片排列，代码和效果如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width:500px;
}
.img1 {
float:left;
}
</style>
</head>
<body>
<div>
我是文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
效果
twhr.png
我们发现当图片设置了左浮动后，其相邻文本元素只会环绕图片排列并不会跑到图片的下方和上方。所以我们可以推测出，浮动的元素是对文字图片等文本元素的排版产生影响的．
有了这个案例，我们解释排版中常碰到的一个现象
页面上有两个一样的宽200像素，高200像素的div,其中div1添加了红色和div2蓝色背景,代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
color:#fff;
/*float: left;*/
}
.div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1">
DIV1DIV1DIV1DIV1DIV1DIV1
</div>
<div class="div2">
我是文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
</body>
</html>
正常排列效果：
zcpl.png
当我将红色div1设置为左浮动时（即将上方代码中的float：left注释取消掉），其所占据的空间上浮，所以蓝色div2就跑入了原红色div1的位置也就是div1的下方位置。
float:left; /*放开注释*/
蓝色div1浮动后效果：
flyh.png
此时，从视觉上我们发现，蓝色div2中的文字没有在蓝色div2中。而我们的代码明明书写的文字是在蓝色div2中的。这其中原因就是文字会受浮动元素影响，而并不会总是完全跟随父级定位到父级的最左最上部分。
如果我们去掉蓝色div2的宽度值，或给它设置超过200px宽度时，文字和图片就会尽量往父元素即蓝色div2的顶部和左边靠，但它依然需要留出红色div1的区间。
.div2{
width: 400px;
height: 400px;
background-color: blue;
}
宽度增加时效果：
gkyh.png
由此我们得出一个小结论
浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版。
