CSS给元素清除浮动影响的方法，--最全四种方法
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动方法一</title>
<style>
*{
margin:;
padding:;
}
.father{
width: 500px;
background-color: pink;
}
.son1,
.son2{
height: 200px;
width: 200px;
float: left;
}
.son1{
background-color: blue;
}
.son2{
background-color: skyblue;
}
.box{
width: 600px;
height: 200px;
background-color: #000;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<!-- 在浮动元素的末尾添加一个空的标签 -->
<div class="clearfix"></div>
</div>
<div class="box"></div>
</body>
</html>
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动方法二</title>
<style>
*{
margin:;
padding:;
}
.father{
width: 500px;
background-color: pink;
overflow: hidden; /* 给父元素添加 overflow:hidden/auto/scroll */
}
.son1,
.son2{
height: 200px;
width: 200px;
float: left;
}
.son1{
background-color: blue;
}
.son2{
background-color: skyblue;
}
.box{
width: 600px;
height: 200px;
background-color: #000;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box"></div>
</body>
</html>
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动方法三</title>
<style>
*{
margin:;
padding:;
}
.father{
width: 500px;
background-color: pink;
overflow: hidden; /* 给父元素添加 overflow:hidden/auto/scroll */
}
.son1,
.son2{
height: 200px;
width: 200px;
float: left;
}
.son1{
background-color: blue;
}
.son2{
background-color: skyblue;
}
.box{
width: 600px;
height: 200px;
background-color: #000;
}
/*给父元素添加类clearfix*/
.clearfix:after{
content: "."; /* 这里尽量写点内容，否则在IE6-7会出现间隙 */
dispaly: black; /* 转换为块级元素 */
height:; /* 高度为0 */
clear: both; /* 清除浮动 */
visibility: hidden; /* 隐藏盒子 */
}
.clearfix{
*zoom:; /* 这是专门给IE6-7做的清除浮动 */
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box"></div>
</body>
</html>
代码实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动方法四</title>
<style>
*{
margin:;
padding:;
}
.father{
width: 500px;
background-color: pink;
overflow: hidden; /* 给父元素添加 overflow:hidden/auto/scroll */
}
.son1,
.son2{
height: 200px;
width: 200px;
float: left;
}
.son1{
background-color: blue;
}
.son2{
background-color: skyblue;
}
.box{
width: 600px;
height: 200px;
background-color: #000;
}
/*给父元素添加类clearfix*/
.clearfix:before,
.clearfix:after{
content:"";
display:table; /*这句话可以触发BFC，BFC可以清除浮动*/
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="box"></div>
</body>
</html>
CSS给元素清除浮动影响的方法，--最全四种方法的更多相关文章
- CSS 清除浮动的四种方法
在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
- css清除浮动影响
将清除浮动代码添加到重置样式表中,随时可以调用 }}.clearfix:after{clear:both} 给需要清除浮动影响的元素添加class名 --- clearfix 例: <!-- c ...
- 什么是BFC？ CSS 如何使用伪元素清除浮动？
.BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting c ...
- div 清除浮动的四种方法
概述:为了解决父级元素因为子级内部高度为0的问题 (很多情况 不方便给父级元素高,因为不知道有多少内容,让里面的盒子自动撑起高度),清除浮动本质叫闭合浮动更好一些,清除浮动就是把浮动的盒子关到里面,让 ...
- css用clearfix清除浮动
本文从http://www.studyofnet.com/news/196.html复制. 本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...
- css学习_css清除浮动
若元素没有设置宽高,那元素实际宽高是被内容撑起来, 若元素自己有设置宽高,那实际面积于自己的盒子模型有关 1.清除浮动的本质 清除浮动主要是为了解决父级元素因为子级浮动而引起的内部高度为0的问题. ( ...
- 清楚float浮动的四种方法
1.对父级设置适合CSS高度 对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置. 2.clear:both清除浮动 为了统一样式,我们 ...
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
随机推荐
- 什么是"双活"
什么是"双活" 主备数据中心之间一般有热备.冷备.双活三种备份方式. 热备 热备的情况下,只有主数据中心承担用户的业务,此时备数据中心对主数据中心进行实时的备份,当主数据中心挂掉以 ...
- 原生JS封装_new函数，实现new关键字的功能
1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...
- P2934 [USACO09JAN]安全出行
图论瞎搞...... solution: 按例化简:给定一个无向图,保证单源最短路唯一,求每个点到1号点的最短路最后一条边被封锁的情况下的最短路 乍一看,应该是次短路,但是稍微用脚趾头想想都能发现不是 ...
- Python2.x安装教程及环境变量配置
下载Python Python的官网是:http://www.python.org/ 进入官网,也可以找到对应的下载页面:http://www.python.org/download/ 安 ...
- SqlServer2005 查询 第五讲 top
今天我们来说sql命令中得参数top top top[ 最前面若干个记录,专属于SqlServer2005的语法,不可移植到其他库.oracle中是用rownum<6来实现输出前5行记录.] 下 ...
- [LC]141题 Linked List Cycle （环形链表）（链表）
①中文题目 给定一个链表,判断链表中是否有环. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 -1,则在该链表中没有环. 示例 ...
- pat 1041 Be Unique（20 分）
1041 Be Unique(20 分) Being unique is so important to people on Mars that even their lottery is desig ...
- pat 1015 Reversible Primes（20 分）
1015 Reversible Primes(20 分) A reversible prime in any number system is a prime whose "reverse& ...
- nyoj 513-A+B Problem IV (java BigDecimal, stripTrailingZeros, toPlainString)
513-A+B Problem IV 内存限制:64MB 时间限制:1000ms 特判: No 通过数:1 提交数:2 难度:3 题目描述: acmj最近发现在使用计算器计算高精度的大数加法时很不方便 ...
- 领扣（LeetCode）Fizz Buzz 个人题解
写一个程序,输出从 1 到 n 数字的字符串表示. 1. 如果 n 是3的倍数,输出“Fizz”: 2. 如果 n 是5的倍数,输出“Buzz”: 3.如果 n 同时是3和5的倍数,输出 “FizzB ...