html div元素浮动,CSS实现元素浮动和清除浮动的方法
浮动基本介绍
在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可。
浮动可以让元素脱离标准文档流,可以实现让多个元素排在同一行,并且可以设置宽高度。
其实浮动是通过float属性来实现的。
float属性值说明表:
属性值
描述
left
设置元素向左浮动。
right
设置元素向右浮动。
右浮动实践
让我们进入右浮动的实践,实践内容如:将class属性值为.box1元素设置为右浮动。
在进入有浮动实践之前我们先看看要浮动元素结构是什么。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
结果图
为什么结果图是一条边框线呢?因为在div标签中还没有内容呢,现在我们将子div标签设置宽高度为100px像素并且添加背景颜色。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
结果图
为什么会排列为3行呢,因为3个div标签都是块级元素。
现在我们将class属性值为.box1的元素设置为右浮动。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:right;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
结果图
注意:现在我们发现calss属性值为.box元素高度变矮了,这就说明了(浮动元素它已经脱离了标准文档流,不再占用空间了)、并且向右浮动,浮动到自身的父元素的边缘位置就停止了浮动。
左浮动实践
让我们进入左浮动的实践,实践内容如:将class属性值为.box1元素设置为左浮动。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
结果图
我们先理解浮动的原理之后再解释下class属性值为.box2元素看不见的原因。
现在笔者给大家看2张实践结果图如:
结果图A
结果图B
通过这2张结果图我们可以把浮动简单的理解为“漂”举例:
假设class属性值为.box是一个池塘,3个子元素都是能够漂浮在池塘水面上的东西,现在我们将calss属性值为.box1元素浮动起来,漂在池塘水面上,是不是就不再占用池塘内的空间了。
既然我们理解为“漂”它一定是漂浮在池塘水面之上,但是没有浮动的元素在池塘水面之内,所以class属性值为.box2元素看不见,并不代表它不存在只是被class属性值为.box1元素给遮挡住了,现在我们将class属性值为.box2元素宽度设置为150px像素。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
结果图
注意:事实证明class属性值为.box2元素是存在的。
下面我们将calss属性值为.box2元素设置为左浮动看看有什么不一样的效果
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
结果图
但是class属性值为.box2的元素左浮动并没有左浮动到本身父元素的边缘位置,为什么在class属性值为.box1后面呢?因为父元素已经有了浮动的子元素后面的子元素在浮动就浮动到前面浮动的元素之后。
现在我们将class属性值为.box3的元素设置为左浮动,看看有什么不一样的效果。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.box2{
width: 150px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
结果图
注意:浮动元素浮动以后,其父元素不再将浮动的子元素包裹在父元素之内,所以结果图出现一条黑色的边框线,若有不明白的看第一个实践内容。
将行内元素设置浮动
如果我们给行内元素设置了浮动,行内元素就拥有了块级元素的特点。
让我们进入行内元素设置浮动实践,实践内容如:将div标签中的span标签设置为左浮动。
在设置左浮动之前我们先看看给span标签设置宽高度和背景颜色有什么效果。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
微笑是最初的信仰1
微笑是最初的信仰2
微笑是最初的信仰3
结果图
现在发现我们给span标签设置了宽高度为100px像素并没有生效,因为现在span标签还是行内元素。
现在我们给span标签设置左浮动,然后我们在看看效果如何。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
微笑是最初的信仰1
微笑是最初的信仰2
微笑是最初的信仰
结果图
注意:行内元素设置为浮动之后就拥有了块级元素的特点。
设置浮动总结
浮动的特点如:
浮动元素脱离了标准的文档流,不再占用父元素的任何空间。
浮动元素比标准文档流的元素层级要高,会将标准文档流的元素遮挡住。
浮动元素会向左浮动或向右浮动。浮动元素会遇到父元素的边缘就停止了浮动。
浮动元素会遇到已经有了浮动的元素,后者会浮动到前者之后就停止了浮动。
浮动元素浮动之后就脱离了父元素,并且父元素不再包裹浮动的元素。
行内元素设置为浮动,就拥有了块级元素的特点。
为什么要清除浮动呢?
因为浮动的元素会影响到下面元素,具体看实践结果图大家就明白了。
class属性值为.box元素的子类元素没有浮动前的效果实践。
代码块
清除浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
}
清除浮动
结果图
class属性值为.box元素的子元素左浮动之后影响到下面的元素排版布局实践。
代码块
浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
清除浮动
结果图
现在大家应该明白了为什么要清除浮动了,有浮动就必须清除浮动,因为上面的元素设置了浮动就会影响到下面元素排版布局。
清除浮动有3种方式
第一种方式
给浮动的元素父元素设置一个固定的高度,从视觉上看到浮动的元素在父元素包裹之内。
我们给浮动元素的父元素设置一个固定600px像素的高度,一起来看看效果如何。
代码块
清除浮动
.box{
width: 600px;
height: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
清除浮动
结果图
这样是解决了下面元素排版布局问题,但是笔者不推荐这么做,因为高度是由子元素的内容撑起来的高度,而不是我们给的固定高度。
第二种方式
其实在CSS中也有清除浮动的属性,清除浮动属性名为clear。
clear属性值说明表
属性值
描述
left
清除左侧浮动元素。
right
清除右侧浮动元素。
both
清除左右侧浮动元素。
要使用这个clear属性必须创建一个新的div元素,创建新的div元素不能放置任何内容,它只能做一个件事情,那就是清除浮动并且将这个新创建的div元素放在最后一个浮动元素的后面才会生效。
左右清除浮动的属性值笔者在这里就不一一实践了,一般我们就用both属性值就可以了,左右清除浮动,干嘛还要计较它是左浮动或右浮动呢,直接清除左右浮动就ok了。
具体的看我们实践的结果图。
代码块
清除浮动
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
.clear{
clear: both;
}
清除浮动
结果图
注意:这才是我们真正想要的结果,并且从视觉上来看浮动的元素包裹在父元素之内的效果。
第三种方式
使用属性为overflow并且属性值为hidden来清除浮动,必须将这个属性设置在浮动元素的父元素身上。
给大家普及下属性为overflow并且属性值为hidden,它原意是用来将溢出的部分内容进行隐藏,但是它还可以清除浮动。
笔者先将内容溢出然后在隐藏溢出的内容,那我们一起来看看呗。
代码块
溢出内容进行隐藏
div{
width: 100px;
height: 50px;
border: 1px solid #000;
}
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
结果图
下面笔者将溢出的内容进行隐藏。
代码块
溢出内容进行隐藏
div{
width: 100px;
height: 50px;
border: 1px solid #000;
overflow: hidden;
}
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
微笑是最初的信仰,微笑是最初的信仰,微笑是最初的信仰。
结果图
使用属性为overflow并且属性值为hidden来清除浮动。
清除浮动之前我们先看看结构是如何的。
代码块
清除浮动
ul{
list-style: none;
}
ul li{
float: left;
border: 1px solid red;
}
- 微笑是最初的信仰1
- 微笑是最初的信仰2
- 微笑是最初的信仰3
- 微笑是最初的信仰4
- 微笑是最初的信仰5
- 微笑是最初的信仰6
- 微笑是最初的信仰7
- 微笑是最初的信仰8
结果图
注意:在这里笔者还没有给浮动元素清除浮动呢,大家可以明显的看到ul标签高度为0。
清除浮动实践
代码块
清除浮动
ul{
list-style: none;
overflow: hidden;
}
ul li{
float: left;
border: 1px solid red;
}
- 微笑是最初的信仰1
- 微笑是最初的信仰2
- 微笑是最初的信仰3
- 微笑是最初的信仰4
- 微笑是最初的信仰5
- 微笑是最初的信仰6
- 微笑是最初的信仰7
- 微笑是最初的信仰8
结果图
现在我们很清楚的看到ul标签高度为23px像素,为什么要使用:属性为overflow并且属性值为hidden来清除浮动,因为ul标签中只能使用li标签元素不能使用其它元素,所以属性为overflow并且属性值为hidden来清除浮动是最好不过啦。
总结
以上所述是小编给大家介绍的CSS实现元素浮动和清除浮动的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
html div元素浮动,CSS实现元素浮动和清除浮动的方法相关推荐
- css为什么要用浮动_css浮动的特性,与浮动带来的影响以及如何清除浮动
块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动 ...
- [css] 为什么会出现浮动?在什么时候需要清除浮动呢?
[css] 为什么会出现浮动?在什么时候需要清除浮动呢? 因为在 div + css 代替 table 布局之后,利用 float 很容易进行一些自适应的布局,比如双飞燕和圣杯布局.当然,float ...
- 元素,布局方式,BFC和清除浮动
元素:块级元素,内联元素,内联块状元素 块级元素:在默认情况下会独占一块区域 相对于块级元素的父元素来讲,块级元素占据的行默认是单独享有的. ...
- html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
- css之使用clearfix类清除浮动
首先,copy下bootstrap里面的写法: .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; ...
- css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...
- CSS学习(第四天)(浮动,常见网页布局,清除浮动,PS切图)
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
- css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...
- 前端html隐藏元素方式,CSS 隐藏元素的八种方法
前言 总括: 本文详细讲述了在网页中用CSS隐藏元素的七种方法. 念念不忘,必有回响;有一口气,点一盏灯. 正文 说起隐藏元素我想每一个前端er都能说起几种,但能说全的我想就不是很多了.博主总结了几种 ...
最新文章
- 区块链+能源,能擦出什么样的火花?
- 硬盘驱动器是如何工作的?
- KD-Tree复习笔记(BZOJ1941 BZOJ2648 BZOJ4066)
- 解决Ubuntu,su: 认证失败
- linux find和xargs
- C语言课后习题(32)
- python字符串split()函数
- open 读Txt文件
- labview温度报警系统
- App渠道安装来源识别与匹配
- 小学计算机管理员教学计划,小学教学计划汇总六篇
- 【视频学习】完结 王霸胆 -美式发音28天完美养成计
- STM32F4时钟系统说明
- 知其然也知其所以然,Redis笔记总结:核心原理与应用实践
- java 实现将图片替换到word 文档中
- 如何下载白纸坊街道卫星地图高清版大图
- PDF怎么修改文字,PDF修改文字操作方法
- java计时器脚本_在倒数计时器脚本中跳过很多秒
- java的山形命名_厦门“鸡地名”共有20处 多因山形像鸡而得名
- Java实现面向切面编程(AOP)