CSS 小结笔记之清除浮动
浮动是一个非常好用的属性，但是有时会出现一些问题，需要进行清除浮动。例如
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .fa {
background-color: red;
width: 600px;
/* height: 600px; */
} .son1 {
width: 200px;
height: 200px;
background-color: aqua;
float: left;
} .son2 {
width: 300px;
height: 200px;
background-color: pink;
float: left;
} .div2 {
width: 700px;
height: 100px;
background-color: orange;
}
</style>
</head> <body> <div class="fa">aaa
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="div2"></div>
</body> </html>
在父盒子没有给出高度的情况下，子盒子浮动不会将父盒子撑开来。
清除浮动使用clear:left|right|both 一般使用clear：both，具体方法如下：
<body>
<div class="fa">aaa
<div class="son1"></div>
<div class="son2"></div>
<div style="clear:both"></div>
</div>
<div class="div2"></div>
</body>
结果如下，这种方法简单明了，但是会增加额外的标签
.fa {
background-color: red;
width: 600px;
overflow: hidden;
}
3、使用after伪元素进行清除浮动
.clearfix:after {
content: ".";
/* 最好给content制定一个值防止旧版浏览器有空隙 */
display: block;
height:;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom:;
/* 星号代表是ie6、ie7能识别的特殊符号
zoom 是ie6、ie7清除浮动的方法*/
}
这样给父盒子增加一个clearfix 类即可实现1中的图片效果。
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
} .clearfix {
*zoom:;
}
用法和方法三一样，给父元素增加clearfix 类即可
第3、4种方法都是目前常用的方法，不增加多余标签，但是ie6和ie7不支持after，需要使用zoom：1来清除浮动
CSS 小结笔记之清除浮动的更多相关文章
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- CSS（一）清除浮动
问题1:关于清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- CSS(7)--- 通俗讲解清除浮动
CSS(7)--- 通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一.理解清除浮动 1.为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效 ...
- CSS 的overflow:hidden (清除浮动)
verflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很 了解.一提到清除浮动,我们就会想到另外一个CSS样式: ...
- 「CSS」常见的清除浮动方法
下面介绍几种清除浮动的方案,供大家参考: 使用额外的标签clear:both .parent {padding: 10px;width: 200px;background: red;} .child ...
- CSS 小结笔记之BFC
BFC 即为Block formatting context 的缩写,BFC 主要用来将一个盒子设置为一个隔离的容器,不管盒子内部的元素具有什么属性,都不会影响到盒子的外面. 1.哪些元素能产生BFC ...
- CSS 小结笔记之定位
定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不 ...
随机推荐
- python中如何使输出不换行
1.在python 2.x版本中,使用“,”(不含双引号)可使输出不换行,例如 2.python 3.x版本输出不换行格式如下 print(x, end="") end=&q ...
- LINUX下 一句话添加用户并设置ROOT权限
来源:linux一条命令添加用户并设置密码 linux一条命令添加一个root级别账户并设置密码 LINUX提权,除非是拿的EXP反弹CMD,才会有回显,这样添加管理员方便了. 通常是在SHELL,菜 ...
- 【jQuery源码】preFilter
preFilter: { "ATTR": function( match ) { //属性名解码 match[1] = match[1].replace( runescape, f ...
- Android 开发工具类 21_SAXForHandler
解析 XML 有两种形式: 1.XMLReader XMLReaser xmlReader = saxParser.getXMLReader(); xmlReadeer.setContentHandl ...
- Ubuntu各版本的历史发行界面
不多说,直接上干货! 总的网址是:http://releases.ubuntu.com/releases/ 比如,选择的是UbuntuKylin,则点击 http://cdimage.ubuntu. ...
- 机器学习--boosting家族之GBDT
本文就对Boosting家族中另一个重要的算法梯度提升树(Gradient Boosting Decison Tree, 以下简称GBDT)做一个总结.GBDT有很多简称,有GBT(Gradient ...
- mysql时间字符串按年/月/天/时分组查询 -- date_format
SELECT DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * ) FROM test GROUP BY DATE_FORMAT( ...
- 转载《浅析MVC框架中View层的优雅设计及实例》
在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...
- SpringBoot源码分析之SpringBoot的启动过程
SpringBoot源码分析之SpringBoot的启动过程 发表于 2017-04-30 | 分类于 springboot | 0 Comments | 阅读次数 SpringB ...
- 设计模式学习--装饰者模式(Decorator Pattern)
概念: 装饰者模式(Decorator Pattern): 动态地将功能添加到对象,相比生成子类更灵活,更富有弹性. 解决方案: 装饰者模式的重点是对象的类型,装饰者对象必须有着相同的接口,也也就是有 ...