浮动
float：浮动方向
1、任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行
3、浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容。
1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止
2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘（也有特殊情况）
3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级盒子平级的文本会向浮动的盒子下方移动）
4非浮动块特性：
Block：会向上占据浮动块所空出的区域，可以被浮动块遮盖
inline,inline-block，文字
无法出现在浮动块所覆盖的渔区，一般形成环绕效果
5.浮动换行阻挡
一般情况下出现在瀑布流布局当中 如果上一行的浮动块高度不一致，就会导致当前行浮动块在浮动过程中被阻挡，margin也是浮动块停止的边缘。
6：收缩
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
解决由于没有设置父级块高度导致的浮动坍塌
1、为没有浮动的块清除浮动，使其出现在原本应出现的位置（清除非浮动块自动补全由于浮动而空出的位置的浮动动作）
为指定标签添加 clear: both;
<style type="text/css">
.d1 {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
.d3 {
height: 200px;
width: 200px;
background-color: blue;
/* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块 */
clear: both;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
2、为父标签设置层级以及溢出样式（一般设置一个即可，但不同浏览器可能不同）
<style type="text/css">
.d1 {
height: 200px;
width: 200px;
background-color: red;
float: left;
}
.d2 {
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
/* .d3 {
height: 200px;
width: 200px;
background-color: blue;
/* 设置之后就不会进行浮动而是占用原本的位置 撑开父级块
clear: both;
} */
.box{
/* 为存放浮动的盒子设置 */
overflow: hidden;
zoom: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<!-- <div class="d3"></div> -->
</div>
</body>
3、为父标签使用伪元素进行设置添加
<style type="text/css">
.d1 {
height: 200px;
width: 200px
最低0.47元/天 解锁文章
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
