css佈局-float佈局

weixin_33728268發表於2018-04-09
6217104-8f4ce440742ad7fc.png
image.png

第一個float例子如下:


6217104-a4392ef35e6e59e8.png
image.png

第二個 float的例子如下:


6217104-d3f1fe4e644cc01d.png
image.png

效果如下:
6217104-97fa8cede67f9d88.png
image.png

效果如下:


6217104-f5de83b882c64493.png
image.png

6217104-a0d6b4c0590d5217.png
image.png

6217104-6001cc2c9e1b6fc2.png
image.png

高度塌陷的例子如下:
1) 可以看到第二個div的高度塌陷了,這時候我們可以通過父元素的高度進行設定 ,使其擺脫塌陷。

  1. 可以給父元素設定 overflow :auto 進行修改,擺脫塌陷問題。
    3) 還可以通過下方的方法去除塌陷。


    6217104-8cc50cf6d34c578a.png
    image.png
6217104-0a3c013f586fcdd2.png
image.png

相關文章