浮动
2021-11-10 本文已影响0人
OmewSPG
为何需要浮动
清除网页布局的本质，就是利用css来摆放盒模型——即把盒子摆放到正确的位置
这里有三种传统布局网页的方式：
- 普通流（标准流）
- 浮动
- 定位
何为标准流
2.标准流布局.PNG
为何需要浮动
3.为何需要浮动.PNG
虽然多个块元素的横向排列，可以采用修改元素的display属性为inline—block来实现，不过这种方式仍然会带来一些问题，如下：
image.png
采用这种方式所产生的间隙是没有办法去除的，大多数时候的网页布局板块之间采用无缝衔接，并且随意更改元素的display属性在某种程度上会造成混乱
由此可见，浮动具有很强的重要性
何为浮动
4.浮动.PNG
来看一个常见的布局实例：
<body>
<ul class="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 285px;
/* background-color: aqua; */
margin: 100px auto;
}
.box li {
width: 296px;
height: 285px;
float: left;
background-color: burlywood;
margin-right: 14px;
}
.box li:last-child {
margin: 0;
}
</style>
image.png
更改了无序列表里的li元素的展现方式，原本的纵向排列变成了横向排列，并且没有修改任何display属性
虽然这里元素之间显示出了间隔，但是是手动用margin属性给予的外边距，如果去掉，这四个li元素将无缝地贴合到一起
image.png
早期写的一篇笔记里，也有提到浮动的另一种使用方法，让图片或者首字母浮动来实现下沉的一种表现形式
image.png
image.png
实现方式并不难，但重点不在这里，考虑到文本和块级元素在浮动时受到的影响会有些许不同，这点在后面的浮动规则里会有具体体现
浮动规则
加了浮动之后的元素，会具有许多特性，这里需要掌握的：
- 浮动元素会脱离标准流（脱标）
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动元素会具有行内块级元素的特性
重点是关于对脱标的理解，这和之后所学到的绝对定位又有根本上的不同，不过这不在今天的讨论范畴以内
脱标
6.脱标.PNG
顶部对齐
7.多个盒子浮动.PNG
具有行内块元素特性
8.浮动元素的特性.PNG
具体规则的体现可以参考这篇：
https://www.jianshu.com/p/e2205a9c5a10
浮动和标准流搭配使用
9.浮动与标准流搭配使用.PNG
10.浮动的注意点.PNG
清除浮动
为何需要清除浮动
1.为何需要清除浮动.PNG
这里要理解清除浮动的本质是什么：
- 清除浮动的本质是清除浮动元素所造成的影响
- 如果父盒子本身具有一定高度，那根本没必要清除浮动，但是实际开发中，我们根本没办法依靠填充内容的多少来确定盒子高度，我们更希望盒子高度能靠内容撑开，实现自适应
- 清除浮动之后，父级元素就会根据浮动的子盒子自动检测高度，父盒子有了高度之后，就不会影响下面的标准流了
如何清除
3.clear.PNG
四种方法
4.额外标签法.PNG
5.after伪元素.PNG
5.overflow.PNG
6.双伪元素法.PNG
