对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法

最新推荐文章于 2024-04-09 19:34:35 发布

ch206265

最新推荐文章于 2024-04-09 19:34:35 发布

阅读量634

点赞数

分类专栏： # CSS 文章标签： css浮动脱离文档流文字绕排创建分栏

本文链接：https://blog.csdn.net/ch206265/article/details/89057295

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、对浮动的三个基本理解——文字绕排、创建分栏、脱离父级块

浮动元素的使命就是尽可能的向左上或者右上迁移。最初创建浮动float属性的主要目的就是实现文字绕排图片的效果，当然浮动float也成了多栏布局的最佳方式。但是，添加过浮动float属性后的元素已经脱离了文档流，它对文档的布局可能会产生破坏性。

1. 文本绕排图片

<img …… />
<p>…the paragraph text…</p>

p {margin:0; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}/*外边距防止图片紧挨文本*/

只需要给图片使用浮动float属性即可实现文本绕排图片，产生的效果如下：
在这里插入图片描述
2. 创建分栏

p {float:left; margin:0; width:200px; border:1px solid red;}
img {float:left; margin:0 4px 4px 0;}

创建分栏，在图片浮动float的基础上，给段落设定固定的宽度width，然后也添加浮动float即可，实现的效果如下：
在这里插入图片描述
3. 浮动元素脱离文档流
常规的文档流，即块级元素包围所有的子级元素，而且在页面中自上而下堆叠在一起。但是，添加过浮动float属性后的元素已经脱离了文档流，它对文档的布局可能会产生破坏性。

常规文档流布局：

<section>
<img src="images/rubber_duck2.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the page.</footer>

section {border:1px solid blue; margin:0 0 10px 0;}
p {margin 0;}/*删除默认的上下外边距*/
footer {border:1px solid red;}

这个常规的文档流效果就是，两个块级元素<section>和<footer>按照自上而下的顺序堆叠在一起
在这里插入图片描述

浮动元素脱离了父级块的包围效果：
如果想要实现图片下方的文字title of picture放置到图片的右边,也就相当于实现文字绕排图片分布，效果如下：

那么根据上面的分析，直接让图片浮动float即可。但是，这样会出现浮动元素脱离父级块的包裹现象，具体表现如下：
```
section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
```
此时浮动float的图片已经脱离了父级块<section>的包裹，并且，父级块只包围剩下的没有浮动的子元素。所以，紧跟着<section>的块——<footer>按照文档流的布局，堆叠在了<section>的后面。

对此需要特别指出的是，图片浮动后，<section>块的起始位置仍然是<body>支撑起的空间(即浏览器页面)的左上角，不过由于图片的浮动，图片元素的起始位置和<section>块的起始位置相同，导致<section>中的非浮动元素只能在图片后面显示。

也就是说，如果footer块的宽度width设置的比较小，小于了图片的宽度，那么就会出现如下效果：

二、三种方法强制父元素包含脱离的浮动元素

为了达到预定的效果，强制父元素仍然包含浮动子元素，有以下几种方法：
方法一：为父元素添加overflow:hidden

section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
img {float:left;}
p {border:1px solid red;}

我们可以尝试这样总结：

当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开；
当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。
引自：overflow: hidden用法，不仅仅是隐藏溢出 - Likebard - 博客园 https://www.cnblogs.com/Likebard/p/5899512.html

方法二：同时浮动父元素

section {border:1px solid blue; float:left; width:100%;}
img {float:left;}
footer {border:1px solid red; clear:left;}

父元素<section>浮动后，不论其子元素是否浮动，它都会紧紧包裹住其子元素。因此，需要设定父元素父元素<section>的宽度，设为width:100%给要放在图片右端的文字拓展空间，否则的话会变成如下效果：

需要注意的是，在给父元素<section>设定浮动的同时，还得给其下的footer设定clear:left，这是因为现在整个<section>都浮动了，没有浮动的footer和它的起始位置相同了，都是页面左上顶角，而清除clear可以强迫被清除的元素位于前一个浮动元素的下方，否则的话会是如下效果：

方法三：添加非浮动的清除元素

way1：给父元素的最后添加一个非浮动的子元素，然后用clear进行清除
<div>很适合做这个没有任何实际意义的 “最后一个元素”

<section>
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
<div class="clear_me"></div>
</section>
<footer> Here is the footer element…</footer>

section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}

way2：clearfix规则

<section class="clearfix">
<img src="images/rubber_duck.jpg">
<p>It's fun to float.</p>
</section>
<footer> Here is the footer element…</footer>

.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}

通过此规则，我们也可以知道，伪类.clearfix:after添加的内容是包括在section中的。

三、对于浮动的理解，以及`clearfix`规则的应用

1. 对于浮动的理解

浮动元素的使命就是尽可能的向左上或者右上迁移。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {width:300px; border:1px solid red;}
        img {float:left; border: 2px solid blueviolet ; margin:0 4px 4px 0;}
        p {margin:0 0 5px 0;border:2px solid blue ;}
    </style>
</head>
<body>
    <section>
        <img src="20190310213835.png">
        <p >This text sits next to the image and because 
        t the image an to the  the image an image an to the 
        image an the image an </p>
        <img src="20190310233633.png">
        <p >This</p>
        <img src="20190310213835.png">
        <p >Because the previous image's text does not…</p>.
        </section>
</body>
</html>

页面效果如下：

其中，红色线框代表的是<section>的范围，蓝色线框代表的是段落p，紫色线框代表的是<img>；三张图都做了浮动float，故而紧邻的文字都会绕排于图片，但是第二张图片的绕排文字太少了，导致空余出比较大的空间，在横向来看足以容纳第三张图片，因此在“浮动元素的使命就是尽可能的向左上或者右上迁移”的规则下，第三张图片排在了文本This所在的<p>（也是块级标签）下面。

2. `clearfix`规则的应用

在每个<p>标签的中追加 “清除的子内容”，将上面的代码改为：

    <!--省略部分代码-->
<style>
        section {width:300px; border:1px solid red;}
        img {float:left; border: 2px solid blueviolet ; margin:0 4px 4px 0;}
        /*为简明起见，省略了字体声明*/
        p {margin:0 0 5px 0;border:2px solid blue ;}
        .clearfix:after {
            content:".";
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }
    </style>
    <!--省略部分代码-->
    <body>
    <section>
        <img src="20190310213835.png">
        <p class="clearfix">This text sits next to the image and because t the image an to the image an to the image an</p>
        <img src="20190310233633.png">
        <p class="clearfix">This</p>
        <img src="20190310213835.png">
        <p class="clearfix">Because the previous image's text does not…</p>.
        </section>
</body>
    <!--省略部分代码-->

最终效果如下：

Reference：

《CSS设计指南(第三版)》
overflow: hidden用法，不仅仅是隐藏溢出 - Likebard - 博客园 https://www.cnblogs.com/Likebard/p/5899512.html

ch206265

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法

浮动元素的使命就是尽可能的向左上或者右上迁移。最初创建浮动float属性的主要目的就是实现文字绕排图片的效果，当然浮动float也成了多栏布局的最佳方式。但是，添加过浮动float属性后的元素已经脱离了文档流，它对文档的布局可能会产生破坏性。
复制链接

扫一扫