html零基础必看——html入门，编程就是如此简单
第十章：float浮动布局
1.什么是浮动
1.1定义
浮动：是元素脱离文档流，然后按照所指定的方向进行移动（左右移动），遇到父级元素边缘或者相邻浮动元素就会停止。
1.2 注意
元素设置了浮动属性后，对该元素前面的元素没有影响，只影响该元素后面的元素。
1.3 float属性值
- left 元素向左浮动；
- right 元素向右浮动
- none 没有浮动 默认值
2.浮动的特点
2.1.可以使元素横向排列，一行显示
（元素按照所设置的方向进行移动，遇到父级或相邻浮动的元素就会停止，多个元素使用浮动，则他们会并排显示）
2.2.文字与浮动同级
(文字能够感受到浮动属性，文本内容可环绕在设置浮动元素的周围)
2.3.浮动可用于图文环绕
2.4.如果元素设置了浮动属性，则该元素就变成了具有inline-block行内块属性的元素
(支持内外边距，不支持magrin:auto自适应居中；宽高默认由内容撑开，支持宽高属性设置)
2.5.浮动相比行内块好处：
同样可以横排显示，但浮动解决了元素间空隙和基线对齐的问题，可以使元素靠左（靠右）对齐。所以一般在横向布局时，建议用浮动属性来布局。
具体展示：
【1】元素按照所设置的方向进行移动，遇到父级或相邻浮动的元素就会停止；多个元素使用浮动，则他们会并排显示
这是普通的三个盒子元素：
a.给第一个盒子设置一个向左的浮动属性：.div1{float: left;}
效果图：
此时我们发现第二个绿色的盒子不见了。其实，不是不见了，只是盒子一使用了浮动属性，使得盒子一在原本的位置上向左漂浮起来了，因为左边是它的父级body元素，所以它就停止向左运动，所以就直接在原本的位置上漂浮了，此时第二个绿盒子就受到影响去补上了这个原本盒子的位置，也就是说此时盒子一在盒子二的上面漂浮着，所以我们看不到盒子二了。
b,盒子一不加浮动属性，而是给了盒子二加上浮动属性：.div2{float: left;}
则效果为:
因为此时，盒子二加的向左浮动，对盒子一没有影响，盒子二向左边浮动遇到了父级body，所以就在原本盒子二的部位漂浮，此时对盒子三受到影响，则盒子三上去补了原本盒子二的位置。即此时，盒子二浮动在盒子三上面，所以就看不到盒子三了。
c.同时给三个盒子都加上浮动属性：
效果图：
盒子一向左浮动，遇到父级body停下来了，盒子二向左移动时遇到了同样有浮动属性的盒子一，所以盒子二在盒子一之后停下来了，同理盒子三遇到了同样有浮动属性的盒子二，也停下来了，因此这三个盒子就能够并排显示了。
【2】文字与浮动同级
文字能够感受到浮动属性，文本内容可环绕在设置浮动元素的周围
我们先来看一段代码，
<style>
.box1 {
float: left;
width: 300px;
height: 300px;
background: green;
}
.box2 {
width: 300px;
height: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="box1">我是盒子1</div>
<div class="box2">我是盒子2</div>
</body>
我们设置两个大小一样的盒子，如果给第一个盒子加一个向左的浮动，则第一个盒子浮动在第二个盒子的上面，第二个盒子看不到。
看看效果图：
我们发现第二个盒子并没有完全被遮住，盒子里面的文字还能看到。那是因为 浮动和文字在同一层次 文字感受到浮动 所以文字上不去
也就是说：一个元素设置了浮动属性后，下一个元素就会无视这个元素的存在，但是下一个元素中的文本内容依然会为这个元素让出位置使自身的文本内容环绕在设置浮动元素的周围。所以我们一般用来作为图文环绕：
【3】图文环绕：文本内容会环绕在设置浮动元素的周围，可自行选择浮动方向。
【4】如果元素设置了浮动属性，则该元素就变成了具有inline-block行内块属性的元素：
支持内外边距，不支持magrin:auto自适应居中）；宽高由内容撑开，支持宽高属性设置。
我们先看看一个效果图：
我们可以发现：
- 原本块级元素，宽度默认和父级一样，不支持同行显示，但是使用了浮动属性之后，默认宽度变成了有内容自己撑开（当然也可以自己设置），而且还能同一行显示，这就明显有了块级元素的特征；
- 原本行内元素，不支持宽高设置，但是使用了浮动属性之后，可以自己设置了，这就明显有了块级元素的特征；
- 无论时行内，还是块级元素，在使用了浮动属性之后，都支持内外边距，但是不支持：
margin:auto;自适应居中。
【5】浮动相比行内块好处：
前面我们学习过，使用行内块元素，可以是元素并排显示，但是有几个问题：同行显示后，元素间有空隙，而且有基线对齐问题。
而使用浮动，同样也可以使元素同行显示，就没有这些问题，而且，浮动还可以通过左右浮动来选择靠左或靠右对齐，行内块显然是做不到的，所以我们在使用横向布局时，常常会选择浮动多些。
3.高度塌陷问题
3.1什么是高度塌陷
一个父级盒子不设置高度时候 ，子级给了浮动属性 ，浏览器在计算盒子高度的时候，没有把浮动的盒子计算进去，就造成了父级盒子高度塌陷影响布局。
<style>
div{
width: 1000px;
background-color: pink;
margin: auto;
}
.box1{
width: 500px;
height: 300px;
background-color: green;
}
.box2{
width: 300px;
height: 350px;
background-color: blue;
}
.box3{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
上面是给一个粉色父级盒子，父级不设置高度，则默认是由三个子盒子的高度撑开的。
我们来看一个效果图：
当我们给这几个子级元素添加浮动属性后，效果图是这样的：
我们发现，看不到了粉色盒子，那是因为浏览器在在计算盒子高度的时 候 没有把浮动的盒子计算进去，所以造成这个塌陷现象，很不美观，影响布局。
3.2 解决浮动引起塌陷问题的办法：
1.直接给父级添加一个高度 常用
2.给父元素添加 overflow：hidden；造成bfc效果
- 隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观
- 清除浮动，当子元素浮动时，给父元素添加overflow：hidden，按照它的第一个特性，应该将子元素超出的部分截掉，但是因为子元素有浮动，无法裁剪，所有只能由父元素增加高度去包裹住子元素，使得父元素拥有了高度，而这个高度是跟随子元素自适应的高度，这样就把浮动的子元素包含在父元素内了。
3.在这个父级盒子里面，末尾专门新建一个空的div，为这个div添加一个clear清除属性，设置clear：both；这样无疑是增加了无意义的标签，一个大型页面中，这种标签太多是不好的。
clear属性:
- 属性值：both 同时清除左右浮动
- left 清除左浮动
- right 清除右浮动
4.通过伪类::after清除浮动
利用伪类来清楚浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素。
- content: ‘’; 开启伪元素的 钥匙 key 必需写
- display: block; 伪元素是行内元素 变为块级属性
- clear: both;清除浮动属性
完整演示：
<style>
div {
/* 方法一：給父级设置一个高度 */
/* height: 500px; */
width: 1000px;
background-color: pink;
margin: auto;
/* 方法二：在父元素里添加溢出隐藏属性overflow */
/* overflow: hidden; */
}
.box1 {
float: left;
width: 500px;
height: 300px;
background-color: green;
}
.box2 {
float: left;
width: 300px;
height: 350px;
background-color: blue;
}
.box3 {
float: right;
width: 200px;
height: 200px;
background-color: red;
}
/* 方法三：在这个父级盒子里面，末尾专门新建一个空的div，并设置一个clear清除属性
属性值：both 同时清除左右浮动
left 清除左浮动
right 清除右浮动
*/
/* .clear{
clear: both;
} */
/* 方法四;通过伪类::after清除浮动
/* 开启伪元素的 钥匙 key 必需写 */
/* content: ''; */
/* 伪元素是行内元素 变为块级属性 */
/* display: block; */
/* 清除浮动属性 */
/* clear: both; */
/* .wrap::after{
content: '';
display: block;
clear: both;
} */
</style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!-- 专门新建一个空的div，为这个div添加一个clear清除属性 -->
<div class="clear"></div>
</div>
</body>
总结
上述是小编为大家整理的浮动布局，在进行横向布局时使用浮动布局的优点，以及介绍了常见因浮动布局引起的高度塌陷问题和解决方法等结合相关案例做了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。