CSS 同级元素浮动分析小结
float:left/right/none;
1.同级浮动
(1)使块级元素在同一行显示(所有要在同一行显示的都要加浮动)
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>.box1{border: 2px solid red;width: 40px;height:100px;float:left;
}
.box2{border: 6px solid black;width:100px;height:40px;float:left;
}
.box3{border: 12px solid blue;width:100px;height:300px;float:left;
}
复制代码
(2)使行内元素支持宽和高
<span class="box1"></span>
.box1{border: 2px solid red;width: 40px;height:100px;float:left;
}
复制代码
3.不设宽或高时,宽和高由内容撑开;
<span class="box1">hello</span>.box1{border: 2px solid red;float:left;
}
复制代码
4.如果在某个元素上添加浮动,它将脱离标准文档流(文档流是指对象在文档所占的位置),并且向后找没有浮动的元素覆盖在上面(向后浮动),跟前面的元素没有关
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>.box1{border: 1px solid red;width: 40px;height:100px;float:left;
}
.box2{border: 4px solid blue;width: 140px;height:40px;float:left;
}
.box3{border: 8px solid gray;width: 200px;height:200px;
}
复制代码
5.如果某个元素加了浮动,它先脱离标准流,在根据浮动方向浮动,直到碰到上一浮动元素的边界停下来,或者因为上一层不能放下该元素而掉下来,在下一行;
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
.box1{border: 11px solid red;width: 40px;height:100px;float:right;}
.box2{border: 4px solid blue;width: 140px;height:40px;float:left
}
.box3{border: 8px solid gray;width: 200px;height:200px;
}
复制代码
6.当一个元素A浮动在一个没有浮动的元素B上,他会挤掉B的内容原来的位置,甚至挤出
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
.box1{border: 11px solid red;width: 40px;height:100px;
}
.box2{border: 4px solid blue;width: 60px;height:100px;float:left;
}
.box3{border: 8px solid gray;width: 200px;height:200px;
}
复制代码
分析时注意如果某一个元素浮动,只 看它前面的一个元素 ,前一个元素也浮动,则并排显示,如果前一个元素没有浮动,则相对位置不变;
详细的分析:了解更多
CSS 同级元素浮动分析小结相关推荐
- html div元素浮动,CSS实现元素浮动和清除浮动的方法
浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...
- CSS浮动为什么不会遮盖同级元素
**源码测试浏览器:**IE8核心的360浏览器 1.问题描述 在W3CSchool学习web前端时,看完CSS定位-浮动这一节后,感觉没有什么问题.但是在CSS高级-分类这一节的中进行实践时,遇到了 ...
- [css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法 父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...
- php元素浮动会产生哪些影响,css浮动带来什么问题
css浮动带来的影响:1.由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素:若没有给父元素设置高度,那么父元素就不会在显示屏上显示.2.浮动元素不再占用原文档流的位置,它 ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- [JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...
- html右侧浮动菜单,HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单 今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
- HTML CSS元素浮动
前端页面设计元素浮动是会经常用到的,今天简单的整理一下浮动知识点. CSS元素浮动:使块元素在页面中水平排列,脱离文档流. 使用float来使元素浮动,从而脱离文档流 可选值 1.left 元素立即脱 ...
- HTML首字下沉的编码,css如何实现首字下沉效果?伪元素+浮动实现效果(代码实例)...
在word文档中有一个首字下沉功能,可以在文章的排版时使用,有时能给文章增色不少.那么css可以实现这样的效果吗?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家可以了解如何用css的伪元素 ...
最新文章
- ◎◎identity ,ident_current() ,scope_identity的区别
- CAsyncSocket及CSocket的区别和用法
- python界面编程和网口通信_Python—网络通信编程之tcp通信编程
- 2018杭州云栖大会,梁胜博士的演讲PPT来啦!
- maven 总结整理(二)——download source code
- 买手机需要128 G的存储空间吗?
- floating输入 高阻输入_STM32 GPIO八种输入输出模式
- 2013年最新黑马程序员全套视频-.net视频40G免费下
- 字体靠右代码_html中怎么把文字往右移
- Java优秀员工自我评价_年度优秀员工自我评价
- android设置闹钟组件,Android 设置系统闹钟
- LeetCode--476. 数字的补数
- 致远OA漏洞学习——A6版本test.jsp 文件上传
- ThinkPHP报错The requested URL /index/index/xxx.html was not found on this server.
- Web IDE落地全记录(一)
- 学生成长画像系统前端的一些感悟和知识积累
- 第三方应用调用高德地图
- matlab 2016b下载安装
- 一文搞懂k近邻(k-NN)算法(一)
- iOS随机生成验证码