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:偏移大小:(边偏移一般制定上就不 ...
随机推荐
- org.apache.ibatis.executor.loader.javassist.JavassistProxyFactory$EnhancedResultObjectProxyImpl and no properties discovered to create BeanSerializer (to avoid exception, disable SerializationFeature.
当我用Springboot和mybatis进行延迟加载时候报出如下的错误: org.apache.ibatis.executor.loader.javassist.JavassistProxyFact ...
- php 实现繁体转简体代码效率对比
第一份代码: <?php Header("Content-Type:text/html;charset=utf-8"); function microtime_float() ...
- 关于class的签名Signature
举例1: public class Test05<A, B extends java.util.List<String>, C extends InputStream&Ser ...
- 关联更新 Update
Update a set a.Manage_FunctID=b.Manage_FunctID From Manage_PageUrl a Left join Manage_ButtonBar ...
- Linux -- 使用笔记
Linux新增分辨率1920x1080 sudo gedit /etc/default/grub 找到:#GRUB_GFXMODE=640x480 在这行下面加一行GRUB_GFXMODE=1920x ...
- 根据模板导出excel
@RequestMapping(value = "/export", method = RequestMethod.GET) public void exportApprovals ...
- 手机端 : js设置table内容 加载更多，并头部锁定悬浮
<script src="js/jquery.min.js" type="text/javascript"></script> < ...
- github上老外做的jQuery虚拟键盘
jQuery官方比较迟滞的更新版本: http://plugins.jquery.com/keyboard/ 最新版本更新官方地址: https://github.com/Mottie/Keyboar ...
- Storm框架：如何根据业务条件选择不同的bolt进行下发消息
Strom框架基本概念就不提了,这里主要讲的是Stream自定义ID的消息流.默认spout.bolt都需实现接口方法declareOutputFields,代码如下: @Override publi ...
- [转]linux文件批量转码
linux系统里提供的文件转化编码的命令iconv,例如: iconv -t utf- -f gb2312 -c test.xml > text_UTF8.xml -f 源编码-t 目标编码 ...