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:偏移大小:(边偏移一般制定上就不 ...
随机推荐
- Spring Security构建Rest服务-1400-授权
安全分为 认证和授权,前边讲的都是认证,现在说授权. 前端业务系统的权限简单些,一般只区分是否登录,复杂点的还会区分 VIP用户等简单的角色,权限规则基本不变. 后台系统比较复杂,角色众多,权限随着业 ...
- 编写Android程序Eclipse连不上手机。
主要问题有: 1.开发者选项没有开启 2.设备管理器中MTP有黄色小叹号 3.ADB异常. 问题1容易解决. 问题2,3困扰了我很长时间,网上的很多解决方法是下载安装MTP驱动,或者直接右击更新驱动. ...
- asp.net六种方法刷新页面
第一: private void Button1_Click( object sender, System.EventArgs e ) { Response.Redirect( Reque ...
- C语言理论知识
C语言-----理论部分 一:软件开发概述1.程序语言的发展:机器语言-->汇编语言-->高级语言.2.软件开发的基本步骤与方法:分析问题,建立数学模型-->确定数据结构和算法- ...
- Ripple(瑞波币)validator-keys-tool 配置验证器
目录 Ripple(瑞波币)validator-keys-tool配置验证器 验证器密钥工具指南 验证器密钥 验证器令牌(Validator Keys) public_key撤销 签名 Ripple( ...
- 【转】CSS浮动(float,clear)通俗讲解
作者:杨元 本文链接:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑, ...
- Qt5 编程基础
Qt 是一个C++ GUI应用框架,Qt 具有良好的可移植性支持大多数桌面和移动操作系统并常用于嵌入式开发. Qt的发行版分为商业版和开源版,提供了Qt Creator作为轻量级IDE. Hello ...
- resize定义元素尺寸大小
为了增强用户体验,CSS3增加了很对的新属性,其中一个重要的属性就是resize,它允许用户通过拖动的方式改变元素的尺寸,到目前为止,主要用于可以使用overtflow属性的任何容器元素中 resiz ...
- Spring学习手札（二）面向切面编程AOP
AOP理解 Aspect Oriented Program面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. 但是,这种说法有些片面,因为在软件工程中,AOP的价值体现的并 ...
- 微信小程序之雪碧图(css script)
今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片,我给他推荐了两种方式 1.雪碧图(css script),有过前端经验的朋友应该都有接触过. 2.懒加载. 由于时间关系我就 ...