在前端开发过程中，我们经常会使用到浮动(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实现海盗比酒量

    ** 海盗比酒量** 有一群海盗(不多于20人),在船上比拼酒量.过程如下:打开一瓶酒,所有在场的人平分喝下,有几个人倒下了.再打开一瓶酒平分,又有倒下的,再次重复- 直到开了第4瓶酒,坐着的已经所剩 ...

  2. java实现第七届蓝桥杯抽签

    抽签 抽签 X星球要派出一个5人组成的观察团前往W星. 其中: A国最多可以派出4人. B国最多可以派出2人. C国最多可以派出2人. .... 那么最终派往W星的观察团会有多少种国别的不同组合呢? ...

  3. 什么！你想要封装好的ajax

    ajax作为前端开发领域一个必不可少的内容,也是灵魂所在,今天就ajax的封装给大家做一个分析, 如果没有猜错的话现在基本上用原生去写ajax的意见不多了,这是肯定的 ,为什么这么说,jq的ajax大 ...

  4. ServiceStack.Redis 5.8 版本去掉每小时 6000 次访问限制

    ServiceStack.Redis这个官方 Redis 访问组件从4.0版本后开始商业化了,在使用的时候会有很多限制: 1.类型限制 类型限制是20,这个组件自带序列化功能,使得我们可以直接把对象保 ...

  5. css3中的@font-face你真的了解吗

    css3中的自定义字体方法@font-face @font-face属性可以让我们自定义网站字体属性,然后引用到想要应用该字体的元素上. 基本语法: @font-face { font-family: ...

  6. （六）TestNg中的软断言和硬断言

    原文链接:https://cloud.tencent.com/developer/article/1479172 前言 在执行自动化测试脚本的时候,我们需要自动判断测试脚本执行完成后的实际结果是否与预 ...

  7. update语句基本用法

    UPDATE runoob_tbl SET runoob_title='学习 C++' WHERE runoob_id=;

  8. Android学习笔记StateListDrawable文件

    SateListDrawable,可包含一个 Drawable 数组,让目标组件在不同状态显示不同 Drawable.对应的 xml 文件的根节点 示例 edittext_focused.xml &l ...

  9. APP移动端测试

    重点: app测试的内容 add 命令  monkey命令 次重点:模拟器的安装 雷电 夜神 android 自带的模拟器 真机测试 简单了解云测Testing  腾讯云() 了解:市场有点移动端的操 ...

  10. 终于搞明白Unicode,ASCII,UTF8,UCS2编码是啥了

    [本文版权归微信公众号"代码艺术"(ID:onblog)所有,若是转载请务必保留本段原创声明,违者必究.若是文章有不足之处,欢迎关注微信公众号私信与我进行交流!] 前言 本文起因于 ...