浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。
在图片样式的文字环绕中已经了解了float，float属性取值只有2个，分别是left个right。
浮动布局
将四个
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浮动布局title>
<style type="text/css">
.king{
width: 400px;
background-color: #FFFFFF;
border: 1px solid black;
}
.king div{
padding:10px;
margin: 15px;
border: 2px solid red;
background-color: #FFFFFF;
color: royalblue;
float: left;
}
style>
<body>
<div class="king">
<div class="one">刘德华div>
<div class="two">张学友div>
<div class="three">郭富城div>
<div class="four">黎明div>
div>
body>
html>
在正常文档流的情况下，块元素都是独占一行的。如果要让两个或者多个块元素并排在同一行，可以考虑使用浮动，将块元素脱离正常文档流来实现。
清除浮动
浮动会影响周围元素，并且还会引发很多预想不到的问题。可以使用clear属性来清除浮动带来的影响。
clear属性取值如下表
| 属性值 | 说明 |
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |
一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both”来清除浮动。在实际开发中，凡是用了浮动之后发现有不对劲的地方，首先应该检查有没有清除浮动。
本节主要学习了浮动布局，最后对其总结。
浮动布局：float
清除浮动：clear
4416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
