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;}
显示效果如下:
转载于:https://www.cnblogs.com/xuln/p/10171038.html
CSS float的相关图文详解(二)相关推荐
- SharePoint2007安装图文详解二:安装AD(活动目录)及DNS
在上一篇SharePoint2007安装图文详解一:安装IIS及相关组件中已经介绍了IIS及相关组件的安装,本篇将详细介绍AD(活动目录)的安装. 打开"管理您的服务器",点击&q ...
- SharePoint2007安装图文详解三:安装SqlServer2005
SharePoint2007 中的很多功能会用到数据库,如分析服务,报表服务等.本文介绍SqlServer2005的安装,数据库的安装很简单,基本上安装默认选项点击下一步即可,需要注意的地方在下面会提 ...
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
- 面渣逆袭:Redis连环五十二问,图文详解,这下面试稳了
大家好,我是老三,面渣逆袭系列继续,这节我们来搞定Redis--不会有人假期玩去了吧?不会吧? 基础 1.说说什么是Redis? Redis是一种基于键值对(key-value)的NoSQL数据库. ...
- HTML标签图文详解(二)
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解(一) 接下来我们开始更加深入的学习 <body>标签的属性 其属性有: bgcolor:设置整个网页的背 ...
- Hadoop入门(二)——VMware虚拟网络设置+Windows10的IP地址配置+CentOS7静态IP设置(图文详解步骤2021)
Hadoop入门(二)--VMware虚拟网络设置+Windows10的IP地址配置+CentOS7静态IP设置(图文详解步骤2021) 之前在上一篇文章中讲述了 CentOS7下载+VM上安装(手动 ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
- html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
- 数据库学习笔记第三弹——MySQL常用的图形化管理辅助工具及相关问题(图文详解2022))
数据库学习笔记第三弹--MySQL常用的图形化管理辅助工具(图文详解2022) 文章目录 数据库学习笔记第三弹--MySQL常用的图形化管理辅助工具(图文详解2022) 1.MySQL常用的图形化管理 ...
最新文章
- np.random.choice()用法
- Mysql数据库表复制操作语句
- php.c drcom,校园网绕过Drcom安装自动登录程序到路由器
- java.sql.SQLException: ORA-01691: Lob 段 SONARQUBE2.SYS_LOB0000119128C00008$$ 无法通过 128 (在表空间 USERS 中
- matlab圆柱饶流,有限元法解二维圆柱绕流问题.pdf
- spring @Scheduled 注解实现的定时任务 3步走
- 我安装Microsoft SQLServer 2000时出现问题
- Rhadoop集群搭建
- NVIDIA发布新驱动,支持RTX 4090,性能飞起!
- 超链接标签a实现跳转
- linux用pwd转换到系统目录,详细讲解Linux系统中pwd命令的使用技巧
- 课程设计题八:篮球比赛计分器
- Linux命令-samba服务器和防火墙
- 中秋节ppt模板推荐
- Caltech Pedestrian Detection数据的预处理
- Ubuntu18.04下安装Nvidia驱动和CUDA10.1+CUDNN7.6.5
- 统计学方法论2---------推断统计分析:通过样本推断总体
- 商业软件公司关注开源和Linux的5个理由
- Windows server2016 WDS
- 一种TPMS胎压传感器工作模式介绍--汽车胎压监测方案
热门文章
- 排序1+1:冒泡排序法(BubbleSort)的改进以及效率比较
- react的一些思考
- python进阶-面向对象编程四:包装授权和自定制列表某些方法
- 1047. Student List for Course (25)
- 细说Nginx配置文件
- Delphi 的运算符重载(1)
- Simics系统模拟器
- Android中为TextView增加自定义的HTML标签
- Linux Shell常用技巧(十)
- 为什么CTRIP 网站页面中要把小图做在一起的原因.---减少HTML 链接数.