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三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
随机推荐
- HTMLTestRunner加入logging输出
使用HTMLTestRunner生成html的测试报告的时候,报告中只有console输出,logging的输出无法保存, 如果要在报告中加入每一个测试用例执行的logging信息,则需要改HTMLT ...
- 简单的私有DockerHub搭建
Docker Hub 目前Docker官方维护了一个公共仓库https://hub.docker.com, 其中已经包括100000+个的镜像.大部分需求都可以通过在 Docker hub中直接下载镜 ...
- MBR分区表的备份与还原
MBR分区表的备份与还原 MBR分区的存储 从下图可以看出,MBR分区前446字节是boot loader:接下来64字节是分区表:再然后就是三个主分区加一个拓展分区. 一.备份分区表,要跳过前446 ...
- stdClass Object 数据的处理
stdClass Object 数据的处理 在调用接口的时候往往返回的是 stdClass Object 类型的数据,我们在取数据值的时候就阔以直接使用对象->属性值的方式操作值 $ret = ...
- 基于Windows下永久破解jetbrains公司的系列产品（Idea, pycharm,clion,phpstorm）
基于Windows下永久破解jetbrains公司的系列产品(Idea, pycharm,clion,phpstorm): PS : 有能力的建议购买正版,好吧. PS:均针对其对应的2018.3.1 ...
- nyoj 62-笨小熊（以对应数组中的ASC位 + 1）
62-笨小熊 内存限制:64MB 时间限制:2000ms Special Judge: No accepted:15 submit:43 题目描述: 笨小熊的词汇量很小,所以每次做英语选择题的时候都很 ...
- 《JAVA 程序员面试宝典（第四版）》之循环、条件、概率
分享内容:关于集合的使用 书页号码:77页 题目:一个字符串中包含a~z中的多个字符,如有重复,如String data = "aavzcadfdsfsdhshgwasdfasd ...
- python：类1——类和对象基础
一.OO = Object Oriented 面向对象 OOP面向对象编程.OOA面向对象分析.OOD面向对象设计 二.属性+方法——>类(数据和函数) class Turtle(): #类名约 ...
- Asp.net Core 系列之--5.认证、授权与自定义权限的实现
ChuanGoing 2019-11-24 asp.net core系列已经来到了第五篇,通过之前的基础介绍,我们了解了事件订阅/发布的eventbus整个流程,初探dapper ORM实现,并且简单 ...
- 你必须知道的容器日志 (2) 开源日志管理方案 ELK
本篇已加入<.NET Core on K8S学习实践系列文章索引>,可以点击查看更多容器化技术相关系列文章.上一篇<你必须知道的容器日志(1)>中介绍了Docker自带的log ...