在前端开发过程中，我们经常会使用到浮动(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. Linux网卡驱动移植--Dm9000网卡驱动分析

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

  2. ODEINT 求解常微分方程(4）

    import numpy as np from scipy.integrate import odeint import matplotlib.pyplot as plt # function tha ...

  3. VS2019制作的安装包，默认安装到C盘快捷方式无法打开

    先讲讲如何制作安装包 1.下载Visual Studio Installer 1)下载链接https://marketplace.visualstudio.com/items?itemName=Vis ...

  4. CentOS7——搭建LNMP环境(WordPress案例)

    CentOS7--搭建LNMP环境(WordPress案例) LNMP组成介绍 LNMP(Linux-Nginx-MySQL-PHP)网站架构是目前国际流行的Web框架,该框架包括:Linux操作系统 ...

  5. Spring boot添加配置类@Configuration并初始化@Bean，@Resource和@Autowired都为null

    大写加黑,找了好久@Resource和@Autowired都依赖不到创建的bean的原因:@Bean的方法名即是创建的Bean名称 import org.activiti.engine.Process ...

  6. DML_Data Modification_MERGE

    DML_8-Data Modification_MERGE (将Source表合并到Target) 语法:MERGE INTO 目标表USING 源表WHEN MATCHED AND          ...

  7. tomcat的安装部署（windows10）

    一.Tomact下载 地址:https://tomcat.apache.org/

  8. 2019-02-05 Linux的一些常用命令学习2

    黑马程序员python课的笔记 ls -l 显示文件详细信息 ls -l -h 以k形式显示大小 ls -a 显示指定目录下的所有子目录和文件,包括隐藏文件 ls匹配符 *代表任意个数的字符 ?代表任 ...

  9. selenium获取图片验证码

    # encoding:utf-8 from PIL import Image from selenium import webdriver url = '网站地址' driver = webdrive ...

  10. cookie常用函数

    cookie常用函数 web_add_cookie:添加新的cookie或修改已经存在的cokkies web_remove_cookie:删除指定的cookie web_cleanup_cookie ...