浮动#CSS

Hellow大家好！我们今天来学习浮动啦，这是一个非常简单且经常使用的样式哦，还是那句话勤加练习哈！

来看代码！

div{

width: 100px;

height: 100px;

border: 1px solid red;

}

<div></div>

<div></div>

<div></div>

<div></div>

因为他是快元素嘛所以独占一行，排成了四个竖着的方块

我给他添加浮动元素来看一下

tyle>

    div{

        width: 100px;

        height: 100px;

        border: 1px solid red;

        float: left;

    }

 <div></div>

    <div></div>

    <div></div>

    <div></div>

这个float啊能控制元素像指定位置排列，这个属性值为left，如果是right那就是向右排列啦

我们换成四个大小不一的方块再试一下

.one{

    width: 100px;

    height: 100px;

    border: 1px solid red;

}

.two{

    width: 120px;

    height: 120px;

    border: 1px solid blue;

}

.three{

    width: 80px;

    height: 80px;

    border: 1px solid green;

}

.four{

    width: 120px;

    height: 80px;

    border: 1px solid pink;

}

 <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

我们接着来看四个大小不一颜色不一的方块能不能完成浮动呢！

.one{

    width: 100px;

    height: 100px;

    border: 1px solid red;

}

.two{

    width: 120px;

    height: 120px;

    border: 1px solid blue;

}

.three{

    width: 80px;

    height: 80px;

    border: 1px solid green;

}

.four{

    width: 120px;

    height: 80px;

    border: 1px solid pink;

}

    div{

        float: left;

    }

  <div class="one"></div>

    <div class="two"></div>

    <div class="three"></div>

    <div class="four"></div>

答案当然也是可以的啦！浮动在用于排列整行元素的时候用的比较多一点

本次的更新就到这里啦，点个关注再走哦！