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三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
随机推荐
- 2019.11.11 洛谷月赛t3
题目背景 由于Y校的老师非常毒瘤,要求\(zhouwc\)在\(csp\)考前最后\(3\)天参加期中考,\(zhouwc\)非常生气,决定消极考试,以涂完卡但全错为目标.现在\(retcarizy\ ...
- BZOJ 2101: [Usaco2010 Dec]Treasure Chest 藏宝箱（这是我写过最骚气的dp！）
题目描述 贝西和邦妮找到了一个藏宝箱,里面都是金币! 但是身为两头牛,她们不能到商店里把金币换成好吃的东西,于是她们只能用这些金币来玩游戏了. 藏宝箱里一共有N枚金币,第i枚金币的价值是Ci.贝西 ...
- 『题解』Codeforces656E Out of Controls
更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description You are given a complete undirected gr ...
- Java环境变量配置教程
Windows 10 Java环境变量配置教程 目前Windows 10系统已经很成熟,大多数人开发都在Windows 10系统下进行开发,于是乎我做一下Java环境变量在Windows 10配下的 ...
- Java nio 空轮询bug到底是什么
编者注:Java nio 空轮询bug也就是Java nio在Linux系统下的epoll空轮询问题. epoll机制是Linux下一种高效的IO复用方式,相较于select和poll机制来说.其高效 ...
- Java-100天知识进阶-基本类型-知识铺（一）
知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停地来唤醒你记忆深处的知识点. Java的两大数据类型: 一.内置数据类型 二.引用数据类型 内置数据类型 Java语 ...
- Md5实例
MD5实例 我的md5源码 当我们对数据进行操作时,存储到数据库时,有时候不希望别人能够看到,通过md5能够实现对数据的加密. java代码 ```javaimport org.springframe ...
- 从壹开始 [ Design Pattern ] 之一 ║ 设计模式开篇讲
缘起 不说其他的没用的开场白了,直接给大家分享三个小故事,都来自于我的读者粉丝(我厚着脸皮称为粉丝吧
- 用户环境变量 shell变量 别名
常见用户环境变量: 环境变量 说明 LANG HOME LOGNAME 用户名 PATH SHELL PWD 查看环境变量用:env或者echo $LANG 设置用户环境变量:ex ...
- python描述：链表
单链表结构: 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的.链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成.每个结点 ...