前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式
在前端开发过程中，我们经常会使用到浮动(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如何清除浮动？清除浮动的几种方式的更多相关文章
- JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
- 前端设计的常用属性，CSS的盒模型，页面布局的利器
在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...
- java：struts框架2（方法的动态和静态调用，获取Servlet API三种方式（推荐IOC（控制反转）），拦截器，静态代理和动态代理（Spring AOP））
1.方法的静态和动态调用: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCT ...
- C# 中一些类关系的判定方法 C#中关于增强类功能的几种方式 Asp.Net Core 轻松学-多线程之取消令牌
1. IsAssignableFrom实例方法 判断一个类或者接口是否继承自另一个指定的类或者接口. public interface IAnimal { } public interface ID ...
- 前端知识体系：JavaScript基础-原型和原型链-实现继承的几种方式以及他们的优缺点
实现继承的几种方式以及他们的优缺点(参考文档1.参考文档2.参考文档3) 要搞懂JS继承,我们首先要理解原型链:每一个实例对象都有一个__proto__属性(隐式原型),在js内部用来查找原型链:每一 ...
- 还在为AndroidStudio的Gradle版本配置头疼？看看老司机的解决方法吧
在AndroidStudio中新建项目成功后会自动下载对应版本的Gradle,那么下载的Gradle到什么地方呢? Mac上会默认下载到 /Users/<用户名>/.gradle/wrap ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- css清除浮动的3种方式
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...
随机推荐
- java实现第八届蓝桥杯数位和
数位和 题目描述 数学家高斯很小的时候就天分过人.一次老师指定的算数题目是:1+2+-+100. 高斯立即做出答案:5050! 这次你的任务是类似的.但并非是把一个个的数字加起来,而是对该数字的每一个 ...
- MyBatis整合双数据源
有时候在项目中会遇到需要连接两个数据库的情况.本文就结合Spring和Mybatis来讲下怎么使用双数据源(或者是多数据源). 背景知识介绍 本文中实现多数据源的关键是Spring提供的Abstrac ...
- Spring Cloud 系列之 Apollo 配置中心（四）
本篇文章为系列文章,未读前几集的同学请猛戳这里: Spring Cloud 系列之 Apollo 配置中心(一) Spring Cloud 系列之 Apollo 配置中心(二) Spring Clou ...
- 如何监控 Linux 服务器状态？
Linux 服务器我们天天打交道,特别是 Linux 工程师更是如此.为了保证服务器的安全与性能,我们经常需要监控服务器的一些状态,以保证工作能顺利开展. 本文介绍的几个命令,不仅仅适用于服务器监控, ...
- MySQL 8.0 yum安装和配置
MySQL 8.0 centos7.5 x86_64 一.yum安装 1.先卸载机器和mysql有关的东西,有的安装了mariab-lib,会对安装有干扰,卸载了它. [root@localhost ...
- php的ts和nts选择
TS(Thread-Safety)即线程安全,多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数据 ...
- 并行处理框架Celery的Web监控管理服务-Flower
安装和使用 使用pip安装Flower: $ pip install flower或 pip install flower -U -i https://pypi.tuna.tsinghua.edu.c ...
- Activiti6 学习日志（一）：整合 SpringBoot2.1.3
本章节记录整合过程和部分问题,目前整合并不完美后续会继续更新... 文档链接: 5.2.1 activiti用户手册 activiti用户手册 activiti6 API 技术栈: springboo ...
- [每日一题2020.06.12]P3375 【模板】KMP字符串匹配
题目链接 关于kmp : https://www.cnblogs.com/roccoshi/p/13096988.html 关于kmp, 想了很久, 我觉得不应该放在这里写, 另开一贴记录一下. #i ...
- 解除git文件处于lock状态方法
解决办法: 去git文件夹下删除lock文件就可以