在前端开发过程中，我们经常会使用到浮动(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. Java实现第十届蓝桥杯外卖店优先级

    试题 G: 外卖店优先级 时间限制: 1.0s 内存限制: 512.0MB 本题总分:20 分 [问题描述] "饱了么"外卖系统中维护着 N 家外卖店,编号 1 ∼ N.每家外卖店 ...

  2. java实现第三届蓝桥杯古代赌局

    古代赌局 [编程题](满分23分) 俗话说:十赌九输.因为大多数赌局的背后都藏有阴谋.不过也不尽然,有些赌局背后藏有的是:"阳谋". 有一种赌局是这样的:桌子上放六个匣子,编号是1 ...

  3. Linux网卡驱动移植--Dm9000网卡驱动分析

    1. Linux网络体系结构由以下5部分组成 ① 系统调用接口: 位于Linux网络子系统的顶部,为应用程序提供访问内核网络子系统的方法,主要指socket系统调用. ② 协议无关接口: 实现一组基于 ...

  4. zabbix 磁盘分区监控

    系统环境 Zabbix 版本:3.4 操作系统版本:centos7.4 监控分区 / ./boot ./home   先创建监控项的模板 点击创建监控项 名称随意填写,键值的话因为我们监控车的是磁盘剩 ...

  5. 【Spring注解驱动开发】使用@Lazy注解实现懒加载

    写在前面 Spring在启动时,默认会将单实例bean进行实例化,并加载到Spring容器中.也就是说,单实例bean默认在Spring容器启动的时候创建对象,并将对象加载到Spring容器中.如果我 ...

  6. python数据预处理

    缺失值处理 import pandas as pda import numpy as npy import matplotlib.pylab as pyl # data=pda.read_excel( ...

  7. @bzoj - 2595@ 游览计划

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 从未来过绍兴的小D有幸参加了Winter Camp 2008,他 ...

  8. mall

    https://github.com/macrozheng mall整合OSS实现文件上传:https://blog.csdn.net/zhenghongcs/article/details/9931 ...

  9. 数据库整理（三） SQL基础

    数据库整理(三) SQL基础 SQL语言的特点 集数据定义语言(DDL),数据操纵语言(DML),数据控制语言(DCL)功能于一体. 可以独立完成数据库生命周期中的全部活动: ​ ●定义和修改.删除关 ...

  10. S7-200 PLC内部+5VDC电源的负载能力

    S7-200 PLC内部+5VDC电源的负载能力 S7-200 CPU模块提供DC5V和24V电源:当有扩展模块时,CPU通过I/O总线为其提供5V电源,所有扩展模块的SV电源消耗之和不能超过该CPU ...