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三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
随机推荐
- 微服务架构~Zuul1.0和2.0我们该如何选择？
介绍 在今年5月中,Netflix终于开源了它的支持异步调用模式的Zuul网关2.0版本,真可谓千呼万唤始出来.从Netflix的官方博文[附录1]中,我们获得的信息也比较令人振奋: The Clou ...
- 使用FinalShell 安装jdk和tomcat流程(Linux系统是centOS7.5)
本文是作者原创,版权归作者所有.若要转载,请注明出处 我今天刚刚买了一个一年的百度云服务器,85元,还是很便宜的,正好用来练练linux,至于为什么使用FinalShell 而不是xshell,因为F ...
- 康托展开&逆康托展开学习笔记
啊...好久没写了...可能是最后一篇学习笔记了吧 题目大意:给定序列求其在全排列中的排名&&给定排名求排列. 这就是康托展开&&逆康托展开要干的事了.下面依次介绍 一 ...
- 机器学习环境搭建安装TensorFlow1.13.1+Anaconda3.5.3+Python3.7.1+Win10
安装Python3.7.1 此处不再赘述安装过程,作为记录 安装Anaconda3.5.3 Anaconda3-5.3.0-Windows-x86_64.exe 方案1. 可以直接从官网https:/ ...
- PHP路径指定web路径的方法
PHP路径指定web路径的方法直接在/前面加.就是代表web路径了 不是按照文件路径来算了 <pre>./Public/uploads/suolutu/' . $suijishu . '_ ...
- Apache安装问题：APR not found
资料来源:Apache遇到的问题:APR not found 安装apache时出现arp错误问题 按照以上文章试验之后整理如下: #./configure --prefix……检查编辑环境时出现: ...
- thinkphp5配合datatable插件分页后端处理程序
thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...
- 详解Redis RDB持久化、AOF持久化
1.持久化 1.1 持久化简介 持久化(Persistence),持久化是将程序数据在持久状态和瞬时状态间转换的机制,即把数据(如内存中的对象)保存到可永久保存的存储设备中(如磁盘). 1.2 red ...
- opencv 5 图像转换（3 重映射 仿射变换 直方图均衡化）
重映射 实现重映射(remap函数) 基础示例程序:基本重映射 //---------------------------------[头文件.命名空间包含部分]------------------- ...
- 微调(Fine-tune)原理
在自己的数据集上训练一个新的深度学习模型时,一般采取在预训练好的模型上进行微调的方法.什么是微调?这里已VGG16为例进行讲解,下面贴出VGGNet结构示意图. 上面圈出来的是VGG16示意图,也可以 ...