html浮动布局

 

浮动的概念

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> //这样就完成了清除浮动