浮动
来源:互联网 发布:单台mysql最大tps 编辑:程序博客网 时间:2024/06/11 23:47
1. 块级元素浮动将并排显示,不再独占一行
示例代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box2{ width: 100px; height: 100px; border: 1px solid #ccc; background-color: skyblue; } </style></head><body> <div class="box2"></div> <div class="box2"></div></body></html>
效果:
修改:
<style> .box2{ width: 100px; height: 100px; border: 1px solid #ccc; background-color: skyblue; float: left;/*新增*/ }</style>
修改效果:
2. 内联样式浮动就可以设置宽高,不仅能够支持margin-left(right),而且也支持margin-top(bottom)
示例代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box2{ width: 20px;/*无效*/ height: 70px;/*无效*/ border: 1px solid #ccc; margin-top: 20px;/*无效*/ padding: 100px 30px; background-color: skyblue; } </style></head><body> <span class="box2"></span> <span class="box2"></span></body></html>
效果:
修改:
<style> *{ margin: 0; padding: 0; } .box2{ width: 20px;/*生效*/ height: 70px;/*生效*/ border: 1px solid #ccc; margin-top: 20px;/*生效*/ padding: 100px 30px; background-color: skyblue; float: left;/*新增*/ }</style>
修改效果:
3. 浮动元素脱离正常的文档流,普通元素会占据浮动元素的位置
从上图可以看出,默认三个设置了宽高的block
元素,本来会格子独占一行;如果框1设置了向左/向右浮动,他会忽略框2和框3,直到碰到父元素;同时也存在盖住普通元素的风险。
4. 浮动会导致父元素高度坍塌
示例代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <div style="border: solid 5px #0e0; width:300px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div> </div></body></html>
效果:
如上图所示,浮动元素脱离了文档流,并不占据文档流的位置,自然父元素也就不能被撑开,所以没了高度,导致父元素高度坍塌。
浮动元素对父元素的影响
对父容器 若子元素都是浮动元素,则无法撑开父元素高度,父元素失去高度。
浮动元素其他浮动元素的影响
对其他浮动元素,如果包含块太窄,无法完全水平容纳浮动元素,那么其他浮动元素就会向下移动,直到有足够空间。如果浮动元素高度不同,那么向下移动时可能会被卡住。
示例代码1(块太窄,向下移动):
<div style="border: solid 5px #0e0; width:250px;"> <div style="height: 100px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div></div>
效果:
示例代码2(卡住):
<div style="border: solid 5px #0e0; width:250px;"> <div style="height: 120px; width: 100px; background-color: Red; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Green; float:left;"> </div> <div style="height: 100px; width: 100px; background-color: Yellow; float:left;"> </div></div>
效果:
浮动元素对普通元素的影响
普通元素会表现得当作浮动元素不存在一样,浮动元素可以覆盖普通元素,如果宽高合适,普通元素可以占据浮动元素原来的位置
对文字的影响
文字(既inline-level)级的元素会环绕浮动元素,表现的像是察觉到浮动元素一样。
阅读全文
0 0
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 浮动
- 关于为什么malloc开辟的空间,free后再linux下还可以打印出原来的内容
- 【Bzoj4353】play with tree
- PAT乙级 1036. 跟奥巴马一起编程(15)
- 机器学习--生成学习算法
- poj2386——油田问题(简单搜索)
- 浮动
- c#设计模式之原型模式
- php 获取两个时间戳相差的月份
- 简要分析并搞懂9个tcp基础包------三次握手 + 发送数据并收到确认 + 四次挥手
- R语言 实例操作
- 首届世界智能大会天津开幕 新一代人工智能发展国家规划即将发布【智库2861】
- PAT乙级 1037. 在霍格沃茨找零钱(20)
- 什么是Http协议
- Qt学习之2D绘图(画刷和画笔)