css佈局-float佈局

weixin_33728268發表於2018-04-09
原文網址 : https://blog.csdn.net/weixin_33728268/article/details/87468528
CSS
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

相關文章