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