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:偏移大小:(边偏移一般制定上就不 ...
随机推荐
- Java 并发编程——volatile与synchronized
一.Java并发基础 多线程的优点 资源利用率更好 程序设计在某些情况下更简单 程序响应更快 这一点可能对于做客户端开发的更加清楚,一般的UI操作都需要开启一个子线程去完成某个任务,否者会容易导致客户 ...
- spring 接收前台ajax传来的参数的几个方法
知识补充 JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串JSON.parse(), 将JSON数据解析为js原生值 ...
- 仿制淘宝sku点击效果
1.依赖jquery,主要利用二维数组. 2.原生手写. 代码如下: <!DOCTYPE html> <html> <head> <meta charset= ...
- C/C++练习题（一）
1. volatile 关键字在 C++ 中的性能和 C 的一样? 作用是一样的,但是其内部实现原理可能不同. 2. scanf 格式化输入是怎么赋值的? 由于scanf输入的数据个数是不定的,从键盘 ...
- tensorflow model save and restore
TensorFlow 模型保存/载入 我们在上线使用一个算法模型的时候,首先必须将已经训练好的模型保存下来.tensorflow保存模型的方式与sklearn不太一样,sklearn很直接,一个skl ...
- Java直接用javac来编译带package的类
在没有package语句的java类, 我们可以直接使用: javac Test.java 就可以了, 如果Test.java中包含package语句,如:package abc; 编译后,是要求Te ...
- ROR中h()方法和sanitize的区别及Html Filter
一般来说,通常使用input的field都会做一些filter的动作,避免被不怀好意之徒塞一些危险的HTML code(script等)进去搞破坏.在ROR中,我们在前面加一个h()(一般不用括号?不 ...
- java 使用 pdf.js 在线查看 pdf 文档
1. 下载对应的 pdf.js 文件: 推荐地址: https://github.com/mozilla/pdf.js/ http://mozilla.g ...
- c#基础学习(0701)之一些简单的方法练习
一个简单的求数组最大值的方法 //可变参数 int max=GetMaxNumbers(101,30) static int GetMaxNumbers(params int[] pms) { ]; ...
- jade——创建第一个jade模板
什么是jade? jade是node.js的一个模板引擎,参考了haml的语法,是简写的html语言. 使用单个标签代替双标签,类似于Python,通过缩进来确定从属关系,没有结束符号,非常简洁,使用 ...