css3之浮动布局

最新推荐文章于 2023-09-16 16:19:45 发布

就今天去

最新推荐文章于 2023-09-16 16:19:45 发布

阅读量465

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_56047670/article/details/122293181

版权

浮动布局文档流高度塌陷清除浮动文字环绕

关键词由CSDN通过智能技术生成

1、什么是浮动：

浮动就是让元素可以向左或向右移动，直到它的外边距碰到其父级的内边距或者是上一个元素的外边距。

w3shool对浮动的解释：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

1、先来看个例子：

上图

橙色盒子是往左浮动（float:left;），红色箱子紧跟着往左浮动（float:left;），蓝色盒子往右浮动(float:right;)，

橙色盒子在遇到边界之后，停止在左上角。

红色紧跟着左浮动，它遇到了同样是左浮动元素的橙色盒子，所以它停止在橙色盒子的尾巴处。

而蓝色盒子向右浮动直到遇到边界或者同样右浮动的元素则停止。

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于浮动布局那些事儿</title>
    <style type="text/css">
        .div1 {
            height: 200px;
            width: 100px;
            float: left;
            background: #ff9000;
        }
        .div2 {
            height: 200px;
            width: 100px;
            float: left;
            background: red;
        }
        .div3 {
            height: 200px;
            width: 100px;
            float: right;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="text">
        这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,这是文本,
    </div>
</body>
</html>

2、浮动元素会脱离当前文档流，以一种特殊的形式存在，因为它不再处于文档流中，所以它不占据空间

修改一下上面代码，把三个盒子全部改成左浮动（float: left;），则如下图1 所示：

现在我把div2也就是红色盒子的 float:left; 注释掉，效果如下图2：

图2橙色盒子向左浮动，因为橙色盒子不再存在文档流中，红色盒子被橙色盒子给遮盖掉。

而上面图1当三个框同时向左浮动时，它们同是float元素，成列状排列；

3、如果浮动元素的高度不同，那么下移时候会被卡住，看下图

4、文字环绕。

浮动布局的有点是可以在图文混排的时候很好的使文字环绕在图片周围，如下

5、清除浮动：

浮动的缺点：就是浮动元素一旦脱离了文档流，就无法撑起父元素，会造成父级元素高度塌陷。

什么是高度塌陷呢？看下图3

图3 是两个大div，第一个div里面包含3个小div，未设置宽高，小div设置宽高为500px，背景色为橙红蓝。第二个div宽高500px，背景色为黄，上图所示就为高度塌陷，第一个未设置宽高的div的子元素支撑起了父元素，然背景色黄色的div却直接抵在未设置宽高的父元素上，不认可子元素。

解决：使用清除浮动

①父元素未设置宽高的情况下，可以给父元素设置高度，把高度撑起来：

②给父元素设置 overflow 属性，overflow: hidden，

    <style>
        .father {
            overflow: hidden;
        }
    </style>
    <div class="father">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

③设置伪类选择器清除浮动（在css中添加:after伪元素）；如下代码：

    <style>
        .father:after {
            /* 设置添加子元素的内容是空 */
            content: '';
            /* 设置添加子元素为块级元素 */
            display: block;
            /* 设置添加的子元素的高度0 */
            height: 0;
            /* 设置添加子元素看不见 */
            visibility: hidden;
            /* 设置clear：both */
            clear: both;
        }
    </style>

    <div class="father">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>