Fork me on GitHub

div的浮动(float)

什么是浮动

浮动，故名思议，就是移动位置。

之所以不叫移动，而叫浮动，那是因为给元素设置浮动后，元素会浮到文档上面来，术语叫脱离文档流。

例子

下面我们看例子

  1. <html>
  2. <head>
  3. <style>
  4. #div0 {
  5. /* 设置背景色为黄色 */
  6. background-color:yellow;
  8. /* 设置边框为1px的线条 */
  9. border:1px solid;
  11. /* 设置宽度为800px */
  12. width:800px;
  13. }
  14. #div1, #div2 {
  15. /* 设置宽度为300px */
  16. width:300px;
  18. /* 设置高度为300px */
  19. height:300px;
  21. /* 设置边框为1px的线条 */
  22. border:1px solid;
  23. }
  24. #div1 {
  25. /* 设置背景色为灰色 */
  26. background-color:#888;
  27. }
  28. #div2 {
  29. /* 设置背景色为蓝色 */
  30. background-color:#08c;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="div0">
  36. <div id="div1"></div>
  37. <div id="div2"></div>
  38. </div>
  39. </body>
  40. </html>

有三个div，其中一个大的#div0，里面含有两个子div，#div1和#div2。

float

可以看到，大的黄色#div0，嵌套了一个灰色的#div1和一个蓝色的#div2。

由于div是块级元素，所以灰色和黄色的div不会在同一排显示。

测试1

这个时候，我们给#div1，设置右浮动。

  1. #div1 {
  2. /* 设置背景色为灰色 */
  3. background-color:#888;
  5. /* 右浮动 */
  6. float:right;
  7. }

float1
这个时候，可以看到，灰色的#div1到右边去了。

而黄色#div0的高度，只有一半了。

这是因为，当#div1浮动到右边后，它就脱离文档流了，来到文档的上方，也就是和原来的#div0、#div2不在同一个层面上了。

这时候，#div0的高度，就等于是现在还在同一层面上#div2的高度。

测试2

我们再给#div2做个左浮动

  1. #div2 {
  2. /* 设置背景色为蓝色 */
  3. background-color:#08c;
  5. /* 左浮动 */
  6. float:left;
  7. }

float2

发现#div0居然不见了，但是可以图片顶部，出现#div0的边框。

这是由于，#div1和#div2都设置了浮动，它们都脱离了文档流，和#div0不在同一个层面上了。

也就是#div0里面没有了内容，就坍塌的只剩下边框了。

测试三

如果你需要#div0也有一个高度 ，刚好能包裹着浮动的子元素，那么你可以给#div0也设置一个浮动，这样他们就又在同一个层面上了。

  1. #div0 {
  2. /* 设置背景色为黄色 */
  3. background-color:yellow;
  5. /* 设置边框为1px的线条 */
  6. border:1px solid;
  8. /* 左浮动 */
  9. float:left;
  10. }

float3

posted @ 2018-10-25 14:01  big2cat  阅读(9437)  评论(1)  编辑  收藏  举报