一、浮动布局
(一)功能
1、布局方向:(1)垂直方向(2)水平方向
水平方向受限,需要设置宽度;
在水平方向布局的时候出现两个问题:间隙问题(font-size:0)和行对齐问题(vertical-align)。
2、浮动布局可以让水平排列变简单,浮动的初衷是用来解决文字环绕;
*原来代码:需要设置display:inline-align转换类型和给父元素设置font-sise:0px,然后给子元素恢复字体大小和对齐(vertical-align)
*现在代码:给子级设置float就行,默认顶部对齐,没有间隙,可以自由设置margin
(二)浮动布局的原理(浮动特点和用法、存在的问题)
1、属性值有left、right
2、浮动规则:设置后元素先浮起来从当前行脱离默认的文本流,进入到新的一层(浮动层),然后会按照设定的方向结合移动,直到遇到父级块的边缘或者其他浮动块边缘停止;
与margin不同,浮动只能设置移动方向,不能设置距离
3、元素发生浮动仅限当前行
(三)浮动顺序:标签先写先浮动
(四)浮动换行问题:
1、剩余存放空间: 浮动块浮动方向一致时(比如都向左浮动),浮动块的剩余空间,是在上一个相邻浮动块与父级边缘之间存放,如果上一个相邻浮动块与父级边缘之间宽度能够容纳该浮动元素,则在上一个相邻浮动块之后,如果不能,则依次向上寻找上一个浮动元素,直到寻找到的浮动元素与父级边缘之间有足够空间能够容纳该元素,放在寻找到的浮动元素之后;如果当前的所有元素都不能满足条件,换一整行。
(五)浮动坍塌
1、当我们将父级的高度取消之后,希望由容撑开,但是结果发现父级的高度,由没有做浮动的子元素撑开的;如果所有的子元素都做了浮动,那么父元素的高度将完全丢失。
*两个原因导致:
(1)父级没有设置高度;
(2)子级的发生浮动,脱离了原来的文本流,进入浮动层,与父级不在一层,因此无法撑开父级高度
2、浮动坍塌原理:父级在不设置高度,且所有自己都从父级中浮动起来之后,导致父级高度丢失的现象。
(六)浮动坍塌危害:导致后面布局紊乱
1、清浮动:消除这种浮动坍塌影响的方法
(七)清浮动方法
1、给父级设置固定高度(缺点:不灵活,不建议使用)
如果子元素是由内容撑开的,并做了浮动,我们没有办法给父级一个固定的高度。
2、让父级也发生浮动(不可取) 。
让父级也进入浮动层,子级跟父级在同一层级。但这种方法有一个明显的缺点,就是父级如果发生浮动,又会影响父级上一级元素和布局
3、给父级设置overflow:hidden(缺点:不能完全显示内容)
4、给父级设置display:inline-block
5、在父级中最后一个位置添加一个block类型的空元素,然后给这个空元素设置clear(值left/right/both)属性(缺点:增加了代码复杂性)
6、设置一个伪元素(名称::after{})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.box{
width:1075px;
/* height:1305px; */
border:3px solid black;
}
.box div{
width:215px;
height:215px;
float:left;
}
.box>.a{
background:#e93325;
}
.box>.b{
background:#f1a93d;
}
.box>.c{
background:#377e20;
}
.box>.d{
background:#0000fd;
}
.box>.e{
background:#75147b;
}
.box>.f{
width:655px;
height:350px;
background:#f5c2cb;
}
.box>.g{
width:420px;
height:350px;
background:#97342f;
}
.box>.h{
width:328px;
height:350px;
background:#ffff55;
}
.box>.i{
width:327px;
height:350px;
background:#a6eb9a;
}
.box>.j{
width:420px;
height:520px;
background:#7d7d7d;
float: right;
}
.box>.k{
width:655px;
height:170px;
background:#b5d6e5;
}
.box>.l{
width:1075px;
height:215px;
background:#010101;
}
.clear::after{
content:'';
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="box clear">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
<div class="e">5</div>
<div class="f">6</div>
<div class="g">7</div>
<div class="h">8</div>
<div class="i">9</div>
<div class="j">10</div>
<div class="k">11</div>
<div class="l">12</div>
</div>
</body>
</html>