在前端开发过程中，我们经常会使用到浮动(float)，这个我们即爱又恨的属性。爱，是因为通过浮动，我们能很方便地进行布局；恨，是因为浮动之后遗留下来太多的问题需要解决。下面本篇文章给大家介绍CSS清除浮动的几种方法，希望对大家有所帮助。

方法1：使用带clear属性的空元素

使用空标签清除浮动：在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签（理论上可以是任何标签，但常用<div>和<p>）清除浮动，并为其定义CSS代码clear:both。

代码实例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .demo{

                width: 500px;

                margin: 50px auto;

                background-color: #CCCCCC;

            }

            .left{

                width: 100px;

                height: 100px;

                float: left;

                background-color: #21B4BB;

            }

            .right{

                width: 100px;

                height: 50px;

                float: right;

                background-color: #21B4BB;

            }

            .clear{

                clear:both;

            }

        </style>

    </head>

    <body>

        <div>

            <div>left</div>

            <div>right</div>

            <div></div>

        </div>

    </body>

</html>

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法2：使用CSS的overflow属性

使用overflow清除浮动：只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。

代码实例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .demo{

                width: 500px;

                margin: 50px auto;

                background-color: #CCCCCC;

                overflow:hidden

            }

            .left{

                width: 100px;

                height: 100px;

                float: left;

                background-color: #21B4BB;

            }

            .right{

                width: 100px;

                height: 50px;

                float: right;

                background-color: #21B4BB;

            }

        </style>

    </head>

    <body>

        <div>

            <div>left</div>

            <div>right</div>

        </div>

    </body>

</html>

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

方法3：使用CSS的:after伪元素

对父元素使用:after伪元素，设置display:table。

display:table 使生成的元素以块级表格显示，占满剩余空间。

通过content: " "生成内容作为最后一个元素，至于content里面是什么都是可以的，CSS经典的是 content:"."，有些版本可能content里面内容为空。

代码实例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .demo{

                width: 500px;

                margin: 50px auto;

                background-color: #CCCCCC;

                *zoom: ;

            }

            .demo:after {

                content: " ";

                display: table;

                clear: both;

            }

            .left{

                width: 100px;

                height: 100px;

                float: left;

                background-color: #21B4BB;

            }

            .right{

                width: 100px;

                height: 50px;

                float: right;

                background-color: #21B4BB;

            }

        </style>

    </head>

    <body>

        <div>

            <div>left</div>

            <div>right</div>

        </div>

    </body>

</html>

缺点：适合现代浏览器，不支持IE6/7，*zoom: 1就是为了兼容IE6/7

前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式的更多相关文章

  1. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  2. 前端设计的常用属性，CSS的盒模型，页面布局的利器

    在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...

  3. java：struts框架2（方法的动态和静态调用，获取Servlet API三种方式（推荐IOC（控制反转）），拦截器，静态代理和动态代理（Spring AOP））

    1.方法的静态和动态调用: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...

  4. C# 中一些类关系的判定方法 C#中关于增强类功能的几种方式 Asp.Net Core 轻松学-多线程之取消令牌

    1.  IsAssignableFrom实例方法 判断一个类或者接口是否继承自另一个指定的类或者接口. public interface IAnimal { } public interface ID ...

  5. 前端知识体系：JavaScript基础-原型和原型链-实现继承的几种方式以及他们的优缺点

    实现继承的几种方式以及他们的优缺点(参考文档1.参考文档2.参考文档3) 要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一 ...

  6. 还在为AndroidStudio的Gradle版本配置头疼？看看老司机的解决方法吧

    在AndroidStudio中新建项目成功后会自动下载对应版本的Gradle,那么下载的Gradle到什么地方呢? Mac上会默认下载到 /Users/<用户名>/.gradle/wrap ...

  7. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  8. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  9. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

随机推荐

  1. Mysql添加索引及索引的优缺点

    一.什么是索引? 索引是对数据库表中的一列或多列值进行排序的一种结构,使用索引可以快速访问数据库表中的特定信息. 二.索引的作用? 索引相当于图书上的目录,可以根据目录上的页码快速找到所需的内容,提高 ...

  2. Centos6.5--svn搭建

    0x01 配置好镜像源安装svn yum install subversion -y 0x02 安装完成之后在/opt下面新建一个svn的目录,当然也可以在其他的地方建立svn目录,这个看个人爱好. ...

  3. HDU - 2546 饭卡 题解

    题目大意 电子科大本部食堂的饭卡有一种很诡异的设计,即在购买之前判断余额.如果购买一个商品之前,卡上的剩余金额大于或等于5元,就一定可以购买成功(即使购买后卡上余额为负),否则无法购买(即使金额足够) ...

  4. 实验三 Linux系统用户管理及VIM配置

    项目 内容 这个作业属于哪个课程 班级课程的主页链接 这个作业的要求在哪里 作业要求链接接地址 学号-姓名 17041428-朱槐健 作业学习目标  1.学习Linux系统用户管理 2.学习vim使用 ...

  5. bootargs说明 和 下位机静态ip的设置

    setenv bootargs root=/dev/nfs       nfsroot=192.168.1.8:/opt/rootfs      ip=192.168.1.110:192.168.1. ...

  6. rollup环境搭建（es6转es5、压缩、本地服务器、热更新）

    文件目录 package.json { "name": "my-vue", "version": "1.0.0", &q ...

  7. NativeXml实例训练时注意事项_1

    NativeXml实例训练: 1)使用NativeXml操作xml文件时,需要将几个单元文件在Library中引用,配置好这个后面的就可自由训练.或按照自己想要的组合折腾.       2)运行程序调 ...

  8. 【大厂面试08期】谈一谈你对HashMap的理解？

    摘要 HashMap的原理也是大厂面试中经常会涉及的问题,同时也是工作中常用到的Java容器,本文主要通过对以下问题进行分析讲解,来帮助大家理解HashMap的原理. 1.HashMap添加一个键值对 ...

  9. excel如何快速汇总多个类别的总和？

    这个需求是一位在当前抗疫一线的朋友提出的,和各位分享一下. 需求情况 因为众所周知的原因,他每天都需要为照顾的小区居民购买.运送生活物资.小区居民通过表单的形式提交自己每日的需求,最终汇总到一张exc ...

  10. WeChair Plus版项目介绍

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次:团队作业第一次(2) 这个作业的目标 项目介绍,项目修改 作业正文 ...