关于浮动与清浮动 float

浮动常见的几种属性值

  float {left;  right;  none;  } 

主要是定义元素朝哪个方向浮动；

 

 

元素浮动后的特性

1. 在一行显示，父级的宽度放不下，自己折行；
2. 支持宽高等样式；
3. 不设置宽高时，宽度由内容撑开；
4. 会按照我们指定的方向移动，碰到父级的边界或者前一个浮动元素就会停止浮动（与上一个浮动元素对齐）；
5. 元素浮动后，上下的margin不在叠行；

关于清浮动

　　元素浮动以后，就撑不开父级的高度了，必须要给他的父级清浮动

　　可以在浮动下 添加一个<br/>折行标签；也可以清浮动　　　　

<br> 也同样具有clear属性
<br clear="all" />

清除浮动  

clear 元素的某个方向不能有浮动元素
left;
right;
both;
none;

clear 只会对写在他之前的元素起效果

元素浮动之后就撑不开父级的高度，或者说父级就包不住浮动元素的子元素，清浮动后，使元素依然可以撑开父级的高度

具体方法有下列几种：

1. 给浮动父元素加高度
2. 在浮动元素下边添加 <br/>标签
3. 在浮动元素下边添加 <div class="clearFix"></div>

   .clearFix {
       clear: both;      
   }

    

4. 用伪元素

   before 在元素内容前边添加内容
   after 在元素末尾添加内容

   通过conntent 添加进去的内容，叫做伪元素

   .clearFix：after {
       content: "";
       display: block;
       clear: both;        
   }
   如果要兼容IE低版本的话 需要
   .clear {
       zoom: 1;
   }

   当前主流的清浮动的方式就是利用伪类清浮动

 

转载于:https://www.cnblogs.com/vant850/p/6838976.html