CSS布局之浮动布局

最新推荐文章于 2024-01-05 16:53:29 发布

鴎鴎鹿鸣

最新推荐文章于 2024-01-05 16:53:29 发布

阅读量645

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/gfhdgo/article/details/119740183

版权

本文详细介绍了浮动布局的原理，包括如何使用float属性实现元素的左右浮动，以及浮动流的特性。同时，讨论了浮动元素的字围现象，即文字会围绕浮动元素排列。接着，提出了高度塌陷问题及其对页面布局的影响，并列举了四种解决高度塌陷的方法。文章适合前端开发者理解与解决布局相关问题。

摘要由CSDN通过智能技术生成

一、float布局

浏览器默认的排版方式就是标准流（文档流）的排版方式，标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版。

但是如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)。

float取值：none，默认值，元素默认在标准流(文档流/普通流)中排列

left，元素会立即脱离标准流(文档流/普通流)，向页面的左侧浮动

right，元素会立即脱离标准流(文档流/普通流)，向页面的右侧浮动

浮动流的排版方式：

1.浮动流是一种"半脱离标准流"的排版方式

2.浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: red;
            /* 使用浮动 让红色左浮动 */
            float: left;
            /* margin-top: 30px; */
        }

        .div2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 右浮动 */
            float: right;
        }
    </style>

<body>
    <div>
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body>

注意点：

当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离标准流(文档流/普通流)，元素脱离标准流(文档流/普通流)以后，它下边的元素会立即向上移动，那么这个时候前面一个元素就会盖住后面一个元素。元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。浮动的元素不会超过他上边的兄弟元素，最多最多一边齐。

特点: 

1.在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是块级元素/行内元素/行内块级元素都可以水平排版

2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高

3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像

二、浮动的字围现象

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象

       img {
            width: 100px;
            float: left;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: brown;
            float: left;
            /* 如果行内元素设置浮动，就可以设置宽高 */

        }
    </style>
</head>

<body>
    <div class="content">
        <a>我是一个a标签</a>
        <img src="./images/0bd162d9f2d3572c257447038f13632763d0c35f.jpg" alt="">
        <span>我是一个span标签</span>
        <p>马云，男，汉族，中共党员 [1] ，1964年9月10日生于浙江省杭州市，祖籍浙江省嵊州市谷来镇，
            阿里巴巴集团主要创始人，现担任日本软银董事、大自然保护协会中国理事会主席兼全球董事会成员、华谊兄弟董事、生命科学突破奖基金会董事、联合国数字合作高级别小组联合主席。 [2-3]
            1988年毕业于杭州师范学院外语系，同年担任杭州电子工业学院英文及国际贸易教师，1995年创办中国第一家互联网商业信息发布网站“中国黄页”，1998年出任中国国际电子商务中心国富通信息技术发展有限公司总经理，1999年创办阿里巴巴，并担任阿里集团CEO、董事局主席。
            2013年5月，辞任阿里巴巴集团CEO，继续担任阿里集团董事局主席。6月30日，马云当选全球互联网治理联盟理事会联合主席。 [4] 2019年9月，马云卸任阿里巴巴董事局主席，继续担任阿里巴巴集团董事会成员。</p>
    </div>
</body>

注：该图片和内容皆是从百度百科中获取。

字围现象出现原因：float只是脱离了文档流（普通流），并没有脱离文本流如果想了解这几个流可以前往这个博客进行查看文档流、文本流、定位流、浮动流、脱离文档流。

三、高度塌陷问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。

   .son {
            width: 500px;
            height: 300px;
            background-color: blue;
            /* 让子元素左浮动 */
            float: left;
        }

        .bottom {
            width: 1000px;
            height: 200px;
            background-color: coral;
        }

    </style>
</head>

<body>

    <div class="father">
        <div class="son"></div>
       
    </div>
    <div class="bottom"></div>
</body>

解决方法：

1.将父元素的高度写死，以避免塌陷的问题出现。缺点也很明显，高度设死，无法自动适应子元素的高度。

2.可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动（clear ），这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。但是会添加多余的结构。

  <!-- 在当前父元素的后面添加一个空白div -->
  <div class="clearDiv"></div>

3.通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个 div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是比较推荐使用的方式，几乎没有副作用。

 /*3 通过伪元素选择器::after 清除浮动 （推荐使用） */
        .father::after {
            /* 1,2两步 在父元素后面添加了一个空白块级元素*/
            /*1. 添加一个空白内容  content ->在父元素后面添加了一个空白内容*/
            content: "";
            /*2. 利用display 转化为一个块级元素 */
            display: block;
            /*3. 清除左右浮动 */
            clear: both;
        }

4. 给父元素添加一个属性overflow不为visible 。建议使用overflow ：hidden。这种方式形成了BFC。解决了高度塌陷的问题。（最推荐使用）

.father {
            width: 1000px;
            border: 10px solid red;
            /* 解决内容塌陷方法4  设置overflow */
             overflow: hidden;
        }

鴎鴎鹿鸣

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS布局之浮动布局

一、float布局浏览器默认的排版方式就是标准流（文档流）的排版方式，标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版。但是如果希望块元素在页面中水平排列，可以使块元素脱离标准流(文档流/普通流)，使用float来使元素浮动，从而脱离标准流(文档流/普通流)。 float取值：none，默认值...
复制链接

扫一扫