一、标準文檔流的特性
1、空白折疊
無論多少個空格、換行、tab，都會折疊為一個空格。
2、高矮不齊，底邊對齊
3、自動換行，一行放不下就換行寫
二、行内元素和塊級元素的注意點
1、行内元素不能設定寬高，預設的就是文字的高度。
2、塊級元素可以設定寬高，預設為父親的100%
三、浮動
1、一旦一個元素浮動了，那麼，将能夠并排了，并且能夠設定寬高了。無論它原來是個div還是個span。所有标簽，浮動之後，已經不區分行内、塊級了。
2、浮動的元素會互相貼靠
3、标準流中的文字不會被浮動的盒子遮擋住。
4、永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。
5、收縮，一個浮動的元素，如果沒有設定width，那麼将自動收縮為内容的寬度
四、浮動的清除
1、浮動有開始，就要有清除。
2、div的高度為零，導緻不能給自己浮動的孩子，撐起一個容器。
撐不起一個容器，導緻自己的孩子沒辦法在自己的内部進行正确的浮動。
3、如果一個元素要浮動，那麼它的祖先元素一定要有高度。
有高度的盒子，才能關住浮動。（記住這句過來人的經驗之語）
4、隻要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。是以就是清除浮動帶來的影響了。
5、clear:both;
clear就是清除，both指的是左浮動、右浮動都要清除。
clear:both
的意思就是：不允許左側和右側有浮動對象。
6、隔牆法
就是在兩個浮動的div之間寫一個新的div，給這個div加上style="clear:both;"屬性，然後可以給它設定一個height屬性，
這樣就可以給把上下兩個浮動的div分開，互不影響。
<div style="clear:both;"></div>
7、内牆法
1、一個父親是不能被浮動的兒子撐出高度的。
2、一個div裡面有浮動的一個元素p，外層的div是沒有設定高度的，如果在這個div裡面寫一個 <div style="clear:both;"></div>
作為内牆，那麼這個div就會被撐起來，自适應高度大小。
原文位址：https://www.cnblogs.com/qianguyihao/p/7297736.html