float浮动布局改变默认布局

默认文档流往往不能满足我们的布局需求，我们可以使用如下属性改变默认布局

• display 通过为display属性指定值block, inline ,inline-block等可以改变元素在正常流中的行为
• float 通过为float属性指定值left、right使得块级元素在一行中排列
• position 默认情况下使用的是正常布局，通过指定值来改变其布局方式
• flex通过为使用弹性盒布局的父元素 设置display:flex;来确保一个容器中的子元素进行排列、对齐和分配空白空间
   

这里小编重点讲float浮动布局：

1.什么是float浮动布局？

float浮动布局脱离正常的文档流，脱离结点树

和兄弟节点之间的关系：浮动在后面的兄弟节点之上

作用：块级元素自上而下，从左到右-->列布局

针对修饰的当前元素进行脱离

如：

div {

      float:left 

      margin-left:20px;

      margin-top:30px;

}

div {

     float:right   

     margin-right:20px;

     margin-top:30px;

}

注意：float:left 一般搭配margin-left和margin-top使用；float:right 一般搭配margin-right和margin-top使用

2.float浮动布局产生的问题。

①失去对父元素的支撑。所有的子节点都脱离了文档流，失去对父元素的支撑，导致结果：父元素高度为0。

②兄弟元素会顶上来。后面的兄弟元素占据浮动的前面的兄弟元素的位置。

3.clear清除浮动

①clear:both;

        1.书写位置：可以是下一个非浮动的兄弟节点

        2.在下一个位置新增一个兄弟  <div class="clearboth"></div>

        3.在下一个位置新增一个兄弟  --  伪元素

        父元素::after {

            content: '';

            display:block;

            clear: both;

②对父元素设置高度

ul#u1 li {

            float: left;

}

ul#u1 {

            height: 40px;

}

③父元素：overfloat:hidden

ul#u2 li {

            float: left;

}

ul#u2 {

            overflow: hidden;

 }

4.float实现一行多列和M*N

.one>div {

            box-sizing: border-box;

            width: 20%;

            height: 100px;

            background-color: red;

            float: left;

            margin-left: 4%;

            margin-bottom: 20px;

}

.one>div::after {

            content: '';

            display: block;

            clear: both;

}

注意：

①对盒子设置边框盒子 box-sizing: border-box;

这样在盒子设有边框时排列不会错乱

②假设一行四个盒子，一个盒子width: 20%;那么剩下的20%需要设置margin-left: 4%;

5.文字环绕图片

将图片设置为浮动元素即可。

img {

        float: left;

       margin-right: 30px;

}

以上就是float的应用和float浮动布局产生的问题以及如何清除浮动以解决产生的问题。