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三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
随机推荐
- day 1 堆 hash 线段树 树状数组 冰茶姬 字典树 二叉查找树
来郑州的第二天,早上开始也没说什么就说了些注意安全,各种各样的注意安全... 冰茶姬: 原来再打食物链时看了一下冰茶姬,只注意了路径压缩,没想到还有什么按秩排序但确实快了不少... int find( ...
- 大数据之路week01--day02_2 集合方面的总结
(初稿 太晚了,明天再进行补充) 1.对象数组(掌握) (1)数组既可以存储基本数据类型,也可以存储引用类型.它存储引用类型的时候的数组就叫对象数组. (2)案例: 用数组存储5个学生对象,并遍历数组 ...
- 『题解』Coderforces352A Jeff and Digits
更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description Jeff's got n cards, each card contains ...
- css3-3D特效
2D页面即是在浏览器中开发的页面, 3D可以比喻浏览器为窗口,透过浏览器看到3D物体 一.设置3D场景 perspective:800[3D世界中的物体距3D场景的距离800px] perspecti ...
- 7月22 Linux作业-文件管理
习题内容 解答 1.答案 [root@centos7 ~]# echo '*/1 * * * * /usr/bin/cp /etc /data/`/usr/bin/date +\%Y-\%m-\%d` ...
- 【algo&ds】3.栈和队列
1.堆栈 堆栈(Stack):具有一定操作约束的线性表(只在一端(栈顶,Top)做插入.删除) 先进后出特性 1.1堆栈的抽象数据类型描述 类型名称: 堆栈(Stack) 数据对象集:一个有0个或多个 ...
- JMeter的安装部署——Linux系统
1.配置Java环境 在官网https://www.oracle.com/technetwork/java/javase/downloads/jdk10-downloads-4416644.html下 ...
- C#winfrom文件下载到本地
string remoteUri = System.IO.Path.GetDirectoryName(url); string fileName = System.IO.Path.GetFileNam ...
- 使用POI导出EXCEL工具类并解决导出数据量大的问题
POI导出工具类 工作中常常会遇到一些图表需要导出的功能,在这里自己写了一个工具类方便以后使用(使用POI实现). 项目依赖 <dependency> <groupId>org ...
- 星际争霸2 AI开发(持续更新)
准备 我的环境是python3.6,sc2包0.11.1 机器学习包下载链接:pysc2 地图下载链接maps pysc2是DeepMind开发的星际争霸Ⅱ学习环境. 它是封装星际争霸Ⅱ机器学习API ...