Html布局知识

一、基础div布局

设计布局之前，需要理解元素之间的定位：

1、float

理解html的float有点绕，网上有很多介绍没有说透，这篇说的比较透https://blog.csdn.net/u010297791/article/details/76718589

关键点:

(1)、float设置后，该div就不在标准流上了，folat就是漂浮，设置float的div位于标准流的上方。要记得是漂浮在上方，所以div4是可见的，div4遮挡了div3，而不是div3遮挡div4

#div1{width:100px;height:100px}
#div4{width:50px;height:50px;float:left}
#div3{width:150px;height:150px:}

(2) 一个div{foloat} 后再接div{folat}，是自动接边的，如果接不上才会自动换行；left和right靠左靠右比较好理解

(3)clear:left/right/both 不能理解为字面的清除左/右浮动，可以理解为拒绝左/右侧有浮动元素，因为拒绝所以必须向下。

推荐试一下下面的布局，如果清除div4的float，黑色框会另起一行。

    #div1{width: 100px;height: 100px;background: lemonchiffon;}
    #div4{width: 100px;height: 100px;background: lightcoral; float: left;}
    #div3{width: 300px;height: 100px;background: lightskyblue;}
    #div5{width: 100px;height: 100px;float: left;background: black;}
    #div6{width: 100px;height: 100px;clear: left; float:right;background:red}

Html布局知识

原文：https://www.cnblogs.com/xiaoguniang0204/p/11710762.html