浮动元素容易造成页面错位现象。下面说说关于清除浮动的几种方法。

首先。先创建一个浮动导致错位的页面。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS---浮动</title>

    <style>

        .float-left{

            float: left;

            width: 200px;

            height: 200px;

            border: 2px solid red;

        }

        .float-right{

            float: right;

            width: 200px;

            height: 200px;

            border: 2px solid blue;

        }

        .float-box{

            background-color: pink;

        }

        .no-float{

            color: #fff;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="float-box">

        <div class="float-left">左浮动</div>

        <div class="float-right">右浮动</div>

    </div>

    <div class="no-float">被浮动影响地元素</div>

</body>

</html>

浮动导致的错位HTML结构

可以看出，左右浮动元素和class为no-float的正常元素重叠了。而且左右浮动元素由于浮动，没法撑开父元素float-box的高度，因此父元素的背景元素也没有显示出来。

解决这个问题，一般可以用下面几个方法：

  • 在浮动元素的父元素也即是class为float-box的元素最后加入一个div标签,

    <div class="float-box">
    
        <div class="float-left">左浮动</div>
    
        <div class="float-right">右浮动</div>
    
        <div class="clear-float"></div>
    
</div>

    属性设置如下：

    .clear-float{
    
        clear:both;
    
}

    这样就可以清除浮动了并且父元素float-box也有高度了。

  • 在浮动元素的父元素之后加入BR标签，<br/>标签具有clear属性，其属性值为left/right/all。
  • <div class="float-box">
    
    <div class="float-left">左浮动</div>
    
    <div class="float-right">右浮动</div>
    
    <br clear="all"/>
    
</div>

    这方法的效果同第一种方法。

  • 在浮动元素的父元素中加入overflow属性。如下 
    .float-box{
    
        overflow: hidden;
    
        background-color: #eee;
    
}

    overflow:hidden;但在内容过多导致溢出时会自动隐藏多余的内容

　　　利用overflow:hidden涉及到BFC块级格式化上下文。通过在父元素中设置

  1. float:left/right;
  2. overflow除了visible之外的值，
  3. display (table-cell，table-caption，inline-block)
  4. position（absolute，fixed）
  5. fieldset元素

　　   均可以触发BFC，BFC可以闭合浮动，因此可以达到清除浮动的效果。

  • 利用伪类:after消除浮动。可以理解为在浮动元素之后加入了一个伪类控制的伪类层，这是一个没有高度没有内容并且带有clear:both属性的层，可以消除浮动。

    .float-box:after{
    
        display: block;
    
        visibility: visible;/*设置伪类层为块元素并且可见*/
    
        clear:both;/*清除浮动*/
    
        height: 0；
    
        line-height:0;
    
        font-size:;
    
        content: "";/*伪类层内容清空*/
    
}

    最后一种方法更深的分离了HTML和CSS，更加方便我们维护页面。

CSS读书笔记（3）---清除浮动的几种方法的更多相关文章

  1. [Web 前端] 018 css 清除浮动的四种方法

    清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...

  2. CSS 小结笔记之清除浮动

    浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...

  3. 活学活用，CSS清除浮动的4种方法

    清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...

  4. css清除浮动的几种方法整理

    四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...

  5. [css]浮动-清除浮动的3种方法

    清除浮动的方法: 内墙法 注: 这是个奇淫技巧,没什么原理可言,记住即可 这个技巧又使得父box重新可以被子box撑开高度了. 隔墙法-适用于2个box之间上下排列 由于2个box高度依旧是0, 彼此 ...

  6. css清除浮动的8种方法以及优缺点

    浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...

  7. CSS 清除浮动的4种方法

    此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...

  8. CSS 清除浮动的几种方法

    导读: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用.不过有利也有弊,使用浮动 ...

  9. CSS 清除浮动的四种方法

    在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...

随机推荐

  1. webpack学习笔记(1)--webpack.config.js

    主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...

  2. Linux—Ubuntu14.0.5设置MySQL的字符集

    1.mysql配置文件地址 cd /etc/mysql/my.cnf 2.在[mysqld]在下方添加以下代码 [mysqld] init_connect='SET collation_connect ...

  3. 洛谷11月月赛（284pts rank85）

    https://www.luogu.org/contestnew/show/12006 我是比赛完后在去写的 这是我第一次打洛谷月赛,之前一次是比赛完才去看而且写了第一题就没写后面的了 284分,太水 ...

  4. 邓_ SVN·最新使用教程总结

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  5. 解决ICS40上设置APN无权限问题

    在ICS40以前的版本中,如果程序需要设置APN,只需要在AndroidManifest文件中声明<uses-permission android:name="android.perm ...

  6. [置顶] Java Web学习总结（24）——SSM(Spring+SpringMVC+MyBatis)框架快速整合入门教程

    1.基本概念 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One  ...

  7. 2767 Proving Equivalences 至少加几条边让全部图变成强连通模板题

    #include<stdio.h> #include<string.h> #define N 21000 struct node { int u,v,next; }bian[N ...

  8. Maven使用package打包Spring Boot时出现：Unable to find a single main class from the following candidates的问题解决

    问题如下: [ERROR] Failed to execute goal org.springframework.boot:spring-boot-maven-plugin:1.3.5.RELEASE ...

  9. 日志输出最不重要的就是控制台输出，控制台输出就是system.out而已

    1.日志输出最不重要的就是控制台输出,控制台输出就是system.out而已 2.所以日志输出时候会存在一个Bug就是:stdout要配置在日志输出的最前面,因为stdout控制台输出,最不重要,如果 ...

  10. UVA 10039 Railroads

    这道题好吧,一开始便是拓扑排序的想法,搞了好久,试了多组测试数据,没错啊,可是没过...作孽啊,竟然忘了拓扑不能处理环,白浪费了一晚上... 只好用动态规划了.. DP[time][city]表示在t ...