CSS float的相关图文详解（二）
最近这段时间有些忙，一直没有写关于如何清除浮动的，现在终于抽出时间了，还是那句话，如果哪里有错误或者错别字，希望大家留言指正。我们一起进步！
在CSS中，我们通过float属性实现元素的浮动。浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，因此，创建浮动可以使文本围绕图像：
例如：
如果想要阻止行框围绕浮动框，就需要对该框应用 clear 属性。
clear属性规定元素的哪一侧不允许有其他浮动元素，也就是说表示框的哪些边不应该挨着浮动框。其值有：
left：元素左侧不允许有浮动元素
right：元素右侧不允许有浮动元素
both：元素左右两侧不允许有浮动元素
none：默认值，允许浮动元素出现在两侧
为了实现这种效果，在被清理的元素的上外边距删添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
那么为什么要清除浮动？我们知道浮动的本质是用来做一些文字混排效果的，但是，被拿来做布局用则会有很多的问题出现。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。为了解决这些问题就需要在该元素中清除浮动。准确来说并不是清除浮动，而是清除浮动后造成的影响。
清除浮动本质：清除浮动主要是为了解决父元素因为子级浮动引起内部高度为0的问题(父级元素没有设置高度)。
清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口，不让子元素出来影响其他元素。
清除浮动的方法：
1.额外标签法：通过在 浮动元素的末尾添加一个空标签，也就是说如果有多个浮动的话，在最后一个浮动的末尾添加一个空标签。例如'<div style=clear:both></div>'，如果在父盒子中有多个子盒子，那就选择父盒子中最后一个带有浮动的子盒子。
html代码：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
css代码：
<style>
.father{
border:1px solid red;
width:300px;
}
.big{
width:100px;
height:100px;
background-color:red;
}
.small{
width:100px;
height:100px;
background-color:blue;
}
.footer{
width:310px;
height:105px;
background-color:green;
}
</style>
显示效果如下：
这是没有加浮动的盒子的排列效果。而加了浮动之后的代码如下(html代码不变，变的是css代码)：
<style>
.father{
border:1px solid red;
width:300px;
}
.big{
width:100px;
height:100px;
background-color:red;
/*添加了浮动*/
float:left;
}
.small{
width:100px;
height:100px;
background-color:blue;
/*添加了浮动*/
float:left;
}
.footer{
width:310px;
height:105px;
background-color:green;
}
</style>
而这时的显示效果如下：
从代码中可以看出，我们没有给父盒子高度，给了big和small浮动，然后footer盒子跑到了father的下面，原因是没有给father高度，big和small一浮动，父元素father的高度就是0了。而解决这个问题的方法可以使用额外标签方法，即最后一个浮动标签的后面，新添加一个标签，用来清除浮动。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div style="clear:both">这里添加了一个新标签div，使用的是行内样式清除浮动的</div>
</div>
<div class="footer"></div>
</body>
</html>
显示效果如下：
2.父级添加overflow属性方法：可以给父级添加：overflow为hidden | auto | scroll
html代码：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div> </body>
</html>
css代码：
<style>
.father{
border:1px solid red;
width:300px;
}
.big{
width:100px;
height:100px;
background-color:red;
float:left;
}
.small{
width:100px;
height:100px;
background-color:blue;
float:left;
}
.footer{
width:310px;
height:105px;
background-color:green;
}
</style>
显示效果如下：
这时，给big和small添加了浮动，然后footer就跑到了falter的下面，因为本身father是没有高度的，father的高度是big和small撑开的，big和small添加了浮动就不占据原来的位置了，所以father的高度就为0，这时footer就占据了father的位置。解决方法可以给父元素father添加overflow的属性。css代码展示如下
<style>
.father{
border:1px solid red;
width:300px;
/*给父元素添加overflow属性清除浮动*/
overflow:hidden;
}
.big{
width:100px;
height:100px;
background-color:red;
float:left;
}
.small{
width:100px;
height:100px;
background-color:blue;
float:left;
}
.footer{
width:310px;
height:105px;
background-color:green;
}
</style>
显示效果如下：
3.使用after伪元素清除浮动：记住：：：是给父元素添加伪元素。
html代码：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div> </body>
</html>
css代码：
<style>
.father{
border:1px solid red;
width:300px;
overflow:hidden;
}
.big{
width:100px;
height:100px;
background-color:red;
float:left;
}
.small{
width:100px;
height:100px;
background-color:blue;
float:left;
}
.footer{
width:310px;
height:105px;
background-color:green;
}
</style>
显示效果如下：
父盒子没有给高度，给了big和small浮动，然后footer盒子跑到了father下面，原因是没有给father高度，big和small一浮动父亲的高度就为0了。而清除浮动的方法可以使用伪元素清除浮动，代码如下显示：
html代码：
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<!--clearfix这个名字是可以随意取的-->
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div> </body>
</html>
css代码：
/*利用伪元素清除浮动*/
.clearfix:after{ /*正常浏览器清除浮动*/
content:"";
display:block;
height:0;
clear:both;
visibility: hidden;
}
/*ie6清除浮动方式*/
.clearfix{
zoom:1;
}
.father {
border: 1px solid red;
width: 300px;
}
.big{
width:100px;
height:100px;
background: #faa363;
float: left;
}
.small{
width:100px;
height:100px;
background: #2bc4e2;
float:left;
}
.footer{
width:310px;
height:105px;
background: blue;
}
显示效果如下：
CSS float的相关图文详解（二）的更多相关文章
- CSS float的相关图文详解（一）
大家好,作为一个刚入门的小前端,第一次写博客,很是鸡冻.由于涉猎较浅,有些知识可能说的不清楚,或者有什么错误,欢迎留言指正.我的第一篇博客写的关于css的浮动的.想必很多小伙伴特别是刚学的,对浮动有一 ...
- Java Stream函数式编程图文详解(二)：管道数据处理
一.Java Stream管道数据处理操作 在本号之前发布的文章<Java Stream函数式编程?用过都说好,案例图文详解送给你>中,笔者对Java Stream的介绍以及简单的使用方法 ...
- CSS样式----浮动（图文详解）
标准文档流 宏观地讲,我们的web页面和photoshop等设计软件有本质的区别:web页面的制作,是个"流",必须从上而下,像"织毛衣".而设计软件,想往哪里 ...
- css 13-CSS3属性：Flex布局图文详解
13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...
- HTML标签----图文详解（二）
HTML标签超详细的图文演示再来一波~~~ 如果还没有看过昨天的福利的,那可要抓紧喽,传送门:HTML标签----图文详解 本文主要内容 列表标签 表格标签 框架标签及内嵌框架<iframe&g ...
- 如何在IDEA里给大数据项目导入该项目的相关源码（博主推荐）（类似eclipse里同一个workspace下单个子项目存在）（图文详解）
不多说,直接上干货! 如果在一个界面里,可以是单个项目 注意:本文是以gradle项目的方式来做的! 如何在IDEA里正确导入从Github上下载的Gradle项目(含相关源码)(博主推荐)(图文详解 ...
- html 05-HTML标签图文详解（二）
05-HTML标签图文详解(二) #本文主要内容 列表标签:<ul>.<ol>.<dl> 表格标签:<table> 框架标签及内嵌框架<ifram ...
- 面渣逆袭：Redis连环五十二问，图文详解，这下面试稳了！
大家好,我是老三,面渣逆袭系列继续,这节我们来搞定Redis--不会有人假期玩去了吧?不会吧? 基础 1.说说什么是Redis? Redis是一种基于键值对(key-value)的NoSQL数据库. ...
- Hadoop集群搭建安装过程（二）（图文详解---尽情点击！！！）
Hadoop集群搭建安装过程(二)(配置SSH免密登录)(图文详解---尽情点击!!!) 一.配置ssh无密码访问 ®生成公钥密钥对 1.在每个节点上分别执行: ssh-keygen -t rsa(一 ...
随机推荐
- SPP-Net理解
文章没有看完,先挑几个点谈一下. 1. 动机 在上一篇文章的末尾提到,RCNN做了很多重复计算,SPP就是为了解决这个问题而提出的的一个方法----空间金字塔池化. 感觉这个问题本质上还是全连接层对r ...
- ArcGIS Runtime For Android 100.3天地图不加载问题
ArcGIS Runtime 100.3 不加载天地图问题 参考这篇帖子:https://community.esri.com/thread/220496-1003-webtiledlayer-can ...
- Java 设计模式（概述）
设计模式的三个分类 创建型模式:对象 ...
- 原生js实现删除class和添加class
内容来自百度搜索 //判断样式是否存在 function hasClass(ele, cls) { return ele.className.match(new RegExp("(\ ...
- python MVC、MTV 框架介绍 Django 模板系统常用语法
Django 框架简介一.MVC框架和MTV框架1.MVC 全名Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分.优势: 耦合性低 重用性高 生命 ...
- 使用bind提供域名解析服务搭建
正向解析实验 1.安装bind服务 2．在/etc目录中找到该服务程序的主配置文件,然后把第11行和第17行的地址均修改为any 3.正向解析参数如下: 4.编辑数据配置文件,从/var/named目 ...
- Data Center(5): 实例
我们来分析从外网访问内网的服务的具体过程: 首先我们看DNS和Load Balancer是怎么工作的. 客户端要访问我们的系统,发送了一个https请求,https://nova.mycompany. ...
- WPF:How to display a Bitmap on Image control
一个Bitmap文件,叫做screenShotFile, 你可以这样显示到Image控件上. BitmapImage bi = new BitmapImage(); bi.Beg ...
- 实战深度学习（上）OpenCV库
在如今人工智能的浪潮下,无数模拟机器学习和深度学习的开发者工具倍出,其中在计算机图形学和计算机视觉里面最流行的一个库就是OpenCV库了.计算机图形学和计算机视觉学在我们的自动驾驶和仿生机器人当中有着 ...
- 微服务架构-选择Spring Cloud，放弃Dubbo
Spring Cloud 在国内中小型公司能用起来吗?从 2016 年初一直到现在,我们在这条路上已经走了一年多. 在使用 Spring Cloud 之前,我们对微服务实践是没有太多的体会和经验的.从 ...