重新认识web前端-浮动问题的总结

认识什么是浮动

        浮动会使元素【脱离文档流】并按照【指定的方向】排列，
        直到遇到父元素的边界或另一个浮动元素【停止】

        文档流 文档中所有可见元素的排列占位
               默认
                    块元素从上向下排列
                    内联元素从左向右排列

        float:
                left左浮动  从左向右排列元素
                right右浮动 从右向左排列
             
                none不浮动(默认)


        浮动元素特性
                1.脱离文档流（不再占原来位置）
                2.提升层级（覆盖关系）

//css
      div{width: 100px;height: 100px;float:left;}
//html
     <div class="box3"></div>
     <div class="box3"></div>
     <div class="box3"></div>
     <div class="box3"></div>
     <div class="box3"></div>

浮动的问题

浮动会使元素脱离文档流，引起父元素高度塌陷（无法撑开父元素）
影响后续布局

解决方法

     解决方法（清浮动）
             1.给父元素 固定高度
                    缺点：
                        不够灵活

            2. 在浮动元素最后加一个不浮动，空的，块元素{ clear:both;}                           
                clear:both;不允许元素左右两侧出现浮动元素（两侧抗浮动）

                    缺点：
                         结构冗余 代码可读性差

            3.  .clearfix加给浮动元素的父元素（推荐方法）
                .clearfix:after{content:"";display:block;clear:both;}


            4. 父元素 overflow:hidden/auto/scroll
                        缺点：
                            存在溢出内容发生隐藏（显示滚动条等)隐患      

//给父元素高
.wrap{background: #ccc;border:5px solid #000;height: 100px;}
//添加一个空元素，不浮动
 .wrap{background: #ccc;border:5px solid #000;}
.box{float:left;width: 100px;height: 100px;background: red;}
.clearDiv{clear:both;}
// 伪类
  .clearfix{*zoom:1;}
/* 处理兼容 */
 .clearfix:after{content:"";display:block;clear:both;}
 .wrap{background: #ccc;border:5px solid #000;}
 .box{float:left;width: 100px;height: 100px;background: red;}
// overflow
.wrap{background: #ccc;border:5px solid #000;overflow:auto;}
.box{float:left;width: 100px;height: 100px;background: red;}


	<div class="wrap clearfix"> 
		<div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="clearDiv"></div>
    </div>

浮动的总结

浮动元素特性

                1.脱离文档流（不再占原来位置）
                2.提升层级（覆盖关系）
                3.会使未定义宽度的块元素适应内容
                4.不会出现margin值叠加
                5.浮动引起文本绕排（脱离文档流不脱离文本流）

内联元素支持宽高

      float:left right 
      display:block inline-block

clear的作用

clear:
left 抗左浮动
right 抗右浮动
both 抗左右浮动