浮动的概念
flaot :left
flaot:right
左浮动 和 右浮动
float:none
不浮动
现在来展示一下浮动的用法
例如:
<style type="text/css">
*{margin:0;padding:0}
.box{width:1000px;}
.left{width:500px;bgakround:"red"}
.right{width:500px;backround:"cyan"}
</style>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
现在我们可以看到两个 left right两个div盒子 都是没有浮动的
那么他们就会按照 文档流的顺序从上至下的去执行排列
但是 如果我们给他加了 浮动的话
.left{width:500px;bgakround:"red" ;flaot:left}
.right{width:500px;backround:"cyan":flat:right}
这样的话他们就会在 box 这个父级盒子里面浮动起来 然后 变成并列的样子 也就是说打破了文档流的规范
但是 如果我们不给父级加上清除浮动的话可能会影响到 后面内容的排版 如果我们给了固定的高是不会影响的
没给固定的高 不加上清除浮动的话 是对后面 排版右影响的
现在来说一下清除浮动的语法:一般定义为
clearfix:afer{
clear:both;
overflow: hidden;
content="";
display:block
}
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>