float和clear

float和clear

float 属性定义元素在哪个方向浮动

float: left;元素向左浮动
float: right;元素向右浮动
float: none;元素不浮动

      <style>
        .div1{
            float: left;
        }
        .div2{
            float: right;
        }
        .div3{
            float: none;
        }
      </style>

clear 属性规定元素的哪一侧不允许其他浮动元素

clear: left;在左侧不允许浮动元素
clear: right;在左侧不允许浮动元素
clear: both;在左右两侧均不允许浮动元素。
clear: none;允许浮动元素出现在两侧

   <style>
        .div1{
            clear: left;
        }
        .div2{
            clear: right;
        }
        .div3{
            clear: both;
        }
        .div4{
            clear: none;
        }
    </style>

 

当我们使用float属性之后，浮动元素就会跳出父级元素

解决：

1：在浮动元素后面增加元素设置clear: both;强制元素回到父级元素

2：设置父元素属性overfloat：hidden；

3：父类添加伪类与第一种相似

    <style>
        #father:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>