天天看点
返回

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

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

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

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

属性即可实现文本绕排图片，产生的效果如下：

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

2. 创建分栏

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

创建分栏，在图片浮动

float

的基础上，给段落设定固定的宽度

width

，然后也添加浮动

float

即可，实现的效果如下：

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

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>

     按照自上而下的顺序堆叠在一起
    对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法

  • 浮动元素脱离了父级块的包围效果：

    如果想要实现图片下方的文字

    title of picture

     放置到图片的右边,也就相当于实现文字绕排图片分布，效果如下：
    对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法
    那么根据上面的分析，直接让图片浮动

    float

     即可。但是，这样会出现浮动元素脱离父级块的包裹现象，具体表现如下： 
    section {border:1px solid blue; margin:0 0 10px 0;}
img {float:left;}
footer {border:1px solid red;}
    此时浮动

    float

     的图片已经脱离了父级块

    <section>

     的包裹，并且，父级块只包围剩下的没有浮动的子元素。所以，紧跟着

    <section>

     的块——

    <footer>

     按照文档流的布局，堆叠在了

    <section>

     的后面。
    对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法
    对此需要特别指出的是，图片浮动后，

    <section>

     块的起始位置仍然是

    <body>

     支撑起的空间(即浏览器页面)的左上角，不过由于图片的浮动，图片元素的起始位置和

    <section>

     块的起始位置相同，导致

    <section>

     中的非浮动元素只能在图片后面显示。
    对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法
    也就是说，如果

    footer

     块的宽度

    width

     设置的比较小，小于了图片的宽度，那么就会出现如下效果：
    对css浮动的基本理解——文字绕排、创建分栏、脱离文档流及解决办法

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

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

方法一：为父元素添加

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%

给要放在图片右端的文字拓展空间，否则的话会变成如下效果：

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

需要注意的是，在给父元素

<section>

设定浮动的同时，还得给其下的

footer

设定

clear:left

，这是因为现在整个

<section>

都浮动了，没有浮动的

footer

和它的起始位置相同了，都是页面左上顶角，而清除

clear

可以强迫被清除的元素位于前一个浮动元素的下方，否则的话会是如下效果：

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

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

  • 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>

页面效果如下：

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

其中，红色线框代表的是

<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>
    <!--省略部分代码-->

最终效果如下：

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

Reference：

  1. 《CSS设计指南(第三版)》
  2. overflow: hidden用法，不仅仅是隐藏溢出 - Likebard - 博客园 https://www.cnblogs.com/Likebard/p/5899512.html
# CSS css浮动 脱离文档流 文字绕排 创建分栏
上一篇: 如何脱离屌丝程序员的身份
下一篇: c语言脱离编译器运行指针,c语言学习笔记（一）

继续阅读