浮动
2021/5/10 10:29:47
本文主要是介绍浮动,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
display和浮动
-
块级元素:独占一行
h1~h6 p div 列表
行内元素:不独占一行
span a img strong ...
行内元素 可以被包括在 块级元素中,反之,则不可以
-
block元素特点:
- 总是在新行上开始
- 高度、行高以及外边距和内边距都可以控制
- 宽度缺省是它的容器的100%,除非设定一个宽度
- 它可以容纳内联元素和其他块元素
行内元素:a span img 也叫内联单元、内嵌元素等,只能容纳文本或其他内联元素
行内元素特点
- 和其他元素都在同一行
- 高,行高及外边距和内边距不可改变;
- 宽度就是它的文字或图片的宽度,不可改变
- 内联元素只能容纳文本或者其他内联元素
属性 display: block 设置成块级元素; display: inline 设置成行内元素 display: inline-block 同时具有块元素和行内元素的属性
display: none 不显示
浮动:
**float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。**
<!-- block 块元素 inline 行内元素 block-inline 是块元素,但是可以内联,在一行! --> <style> div{ width: 200px; height: 100px; border: 10px solid yellow; } span{ width: 200px; height: 100px; border: 10px solid bisque; display: block; } </style>
-
父级边框塌陷问题
-
<!-- clear: right; 右侧不允许有浮动的元素 clear: left; 左侧不允许有浮动的元素 clear: both; 两侧不允许有浮动的元素 clear: none;--> <style> div{ margin: 0px; padding: 5px; } #img1{ border: 1px #8fa1c7 dashed; display: inline-block; float: left; } #img2{ border: 1px #d4af7a dashed; display: inline-block; float: right; clear: right; } #d1{ border: 1px #455a81 dashed; font-size: 20px; display: inline-block; float: right; } </style>
解决方案:
1、增加父级元素的高度~
#father{ border: 1px #000 soild; height:500px;}
2、增加一个空的div标签,清除浮动
<div class="clear"></div> .clear{ clear:both; margin: 0; padding: 0;}
3、overflow
在父级元素中增加一个 overflow: hidden;
4、父类添加一个伪类: after
#father:after{ content: ''; display: block; clear: both;}
小结:
-
浮动元素后面增加空div
增加,代码中尽量避免空div
-
设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
-
overflow
简单,下拉的一些场景避免使用
-
父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用!
OVERFLOW
<!-- overflow: scroll; 边框不足进行滚动--> <style> div{ margin: 0px; padding: 5px; } #d0{ width: 200px; height: 300px; overflow: scroll; } #img1{ border: 1px #8fa1c7 dashed; display: inline-block; float: left; } #img2{ border: 1px #d4af7a dashed; display: inline-block; float: left; } #d1{ border: 1px #455a81 dashed; font-size: 20px; display: inline-block; float: left; } </style>
-
display
方法不可以控制
-
float
浮动起来的话可以脱离标准文档流,所以要解决父级边框塌陷问题~
这篇关于浮动的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现