css之浮动布局float

程序员文章站 2024-01-26 09:53:10

...

1、两个div按顺序写，他们也不会同行显示，而是换行显示

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <title>float 浮动布局</title>
    <style type="text/css">
    #left {
      width: 100px;
      height: 100px;
      background: #2b96e1;
    }
    #right {
      width: 100px;
      height: 100px;
      background: #307d74;
    }
    </style>
</head>
<body>
    <div id="left">俺是左边</div>
    <div id="right">俺是右边</div>
</body>
</html>

css之浮动布局float

2、当你想让它们以同行的形式显示给你看，你需要使用到浮动布局（float）

#left {
    width: 100px;
    height: 100px;
    background: #2b96e1;
    
    /* 使用了浮动布局 */
    float:left;
}
#right {
    width: 100px;
    height: 100px;
    background: #307d74;
    
    /* 使用了浮动布局 */
    float:left;
}

css之浮动布局float

3、如果再来一个大一点，且没有设置浮动的div，会是怎样显示呢

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <title>float 浮动布局</title>
    <style type="text/css">
    #left {
      width: 100px;
      height: 100px;
      background: #2b96e1;
      float: left;
    }
    #right {
      width: 100px;
      height: 100px;
      background: #307d74;
      float: left;
    }
    #bottom {
      width: 400px;
      height: 400px;
      background: #da5882;
    }
    </style>
</head>
<body>
    <div id="left">俺是左边</div>
    <div id="right">俺是右边</div>
    <div id="bottom">俺是下面没浮动的块</div>
</body>
</html>

css之浮动布局float

会发现，浮动的div会漂浮似的盖住了没float的div，那怎样才能让红色的div在蓝色和绿色的div下面呢，

这时我们就需要用到 “清除浮动”（clear）来解决

4、给红色的div样式加上清除浮动

#bottom {
    width: 400px;
    height: 400px;
    background: #da5882;
    
    /* 清除浮动 */
    clear: left;
}

css之浮动布局float

5、搞定，但，浮动除了可以左浮动，也可以右浮动，把绿色的div设置为右浮动，并增加其高度，并增大红色div宽度，你猜这两个div会继续重叠么

#right {
  width: 100px;
  height: 200px;
  background: #307d74;

  /* 右浮动 */
  float: right;
}
#bottom {
  height: 400px;
  background: #da5882;
  clear: left;
}

css之浮动布局float

天啊，绿色的div和红色的div又重叠了，不用当心，浮动有左右，当然清除浮动也有左右啦，clear:right; 可以结局

但是，用了 clear:right; 时左边的蓝色div高度比绿色的高呢，蓝色与红色又会重叠了。不行？！赶快自己试下，反正我是试过了。

办法还是有点，如果你想贪心地清除左右浮动的话，可以使用 clear:both; 来解决！！！

6、差不多了解了浮动布局，那来实现一个效果：让四个div摆成田字格的形状，如何实现呢？？

<!DOCTYPE html>
<html>
<head>
    <meta charset=" utf-8">
    <title>float 浮动布局</title>
    <style type="text/css">
    .dadDiv {
      width: 500px;
      height: 400px;
      border: 1px solid #000;
    }
    .sonDiv {
      float: left;
      width: 100px;
      height: 100px;
    }
    .leftTop {
      background: #2b96e1;
    }
    .rightTop {
      background: #307d74;
    }
    .leftBottom {
      background: #da5882;
    }
    .rightBottom {
      background: #85593b;
    }
    </style>
</head>
<body>
    <div class="dadDiv">
        <div class="sonDiv leftTop">俺是左上</div>
        <div class="sonDiv rightTop">俺是右上</div>
        <div class="sonDiv leftBottom">俺是左下</div>
        <div class="sonDiv rightBottom">俺是右下</div>
    </div>
</body>
</html>

css之浮动布局float

你会看到四个左浮动的div在一个大的有黑色边框的div里面，当我加大四个小div的宽高时，其它不变的情况下，会发生什么：

.sonDiv {
    float: left;
    width: 200px;
    height: 200px;
}

css之浮动布局float

田字格是不是出了来！！再问下，如果小div们都加上margin，大的div会变化吗？

.sonDiv {
  float: left;
  margin: 10px;
  width: 200px;
  height: 200px;
}

css之浮动布局float

你觉得大的div宽高会想加padding时增大，那你就特错啦，大的div宽高不变，小div超出边框。

此时，我们给大的div加上一句东西试试：

.dadDiv {
  width: 500px;
  height: 400px;
  border: 1px solid #000;

  /* 加的是这句，别看错了 */
  overflow: hidden;
}

css之浮动布局float

看出不同了吗，是的，小div超出边框部分变隐藏起来了。

转载于:https://my.oschina.net/cobish/blog/299261

上一篇： DVR不会消亡未来技术发展将融入云计算

下一篇：运营大多数都是靠自己带节奏的！

css之浮动布局float