让盒子向左浮动就写float：left，向右浮动就写float：right
浮动特点
浮动后元素会脱离文档流
浮动元素向父元素左侧或者右侧移动（不会移动出父元素）
浮动元素不会被浮动元素覆盖
浮动元素不会超过它上边的兄弟元素
5.浮动元素不会盖住文字，文字会环绕在浮动元素的周围
两个box，一个div 一段文字写个p元素，一段文字，让box1向左浮动，会从文档流中脱离
- image.png
文字没有被盖住
-
image.png
浮动会使元素脱离文档流-
元素在文档流中的特点
- 块元素- 块元素在文档流中自上向下垂直排列
- 块元素在文档流中默认宽度是父元素的全部
- 块元素在文档流中默认高度被内容撑开
- 行内元素
- 行内元素在文档流中自左向右水平排列
- 行内元素在文档流中默认宽度和高度都被内容撑开
-
元素脱离文档流后的特点
- 行内元素
- 脱离文档流后行内元素会变成块元素
- 写个span，宽高200，背景色，设置span浮动Float：left；
- 行内元素的宽高生效了，说明已经变成块元素了
- 块元素
- 脱离文档流后不再独占一行，
- 脱离文档流后，块元素宽高都被内容撑开
- image.png
- image.png
W3school案例讲解
Ul>li>a的结构
1.先清除默认样式
2.列表样式
3.下划线
-
image.png
4.设置外部容器，宽高都是固定的，总宽度量出1210，高度48，背景颜色，Margin：50 auto
让li横着排列，向左浮动，向右也可以，只是顺序的颠倒了，所以一般是向左浮动
现在是li里面套了一个超链接，应该设置宽高的，要看是整个框能点还是只有a能点，这里就设置给a的
设置超链接样式display：black，转换成块， - image.png
- 字有多少，宽度就有多少，高度和块一样的，也是48
-
image.png
设置行高，使文字垂直居中，行高和高度一样，字体大小默认都是16像素
设置鼠标移入效果，先修改背景颜色
每个框的字的多少是不一样的，每个菜单项的大小该设置多大合适？
直接给a左右加padding，a变大，就把左右填满了，padding：0 5px；
左右padding可以网页调试（后面的写法过时了，一般不用，用nav+a的形式简单快捷，ul+li也可以，稍微复杂一些.）
布局
Header（头部），main（主体）footer（底部）
Header，宽高，1000,120，skyblue，margin：0 auto居中，加个上下外边距
Main宽高1000,400，橘色，margin居中
Footer，宽高1000,120，黄色，居中
-
image.png
Header，宽高，1000,120，skyblue，margin居中
main加个上下外边距 -
image.png
现在想设计复杂点
-
image.png
还是创建三个块，在main里面 - image.png
主体中菜单的样式
Nav 宽200 背景色黄绿
主体中内容的样式
Article 宽600 背景色 西红柿色
主体中侧边栏的样式
Aside 宽200 背景色灰色
三个加一起1000，直接把main撑满了
高度和main一样
现在是垂直排列，现在让三兄弟左浮动，分别都来个float：left
- image.png
-
image.png
第一个必须浮动，否则就会独占一行，老二老三不服不行
中间设置左右外边距 -
image.png
设计图
- image.png
高度塌陷
Box1，直接设置border：4px red solid；
因为没有高度，就是这样效果，被内容撑开的
-
image.png
Box2，宽高20，背景色#bfa，box2多高，box1就多高，
1是2的父元素，只设置边框宽度，样式，颜色
此时1的高度是被2撑开的，2多高，1就多高，在开发时，很多场景下都不会给父元素设置高度，就是希望父元素可以根据子元素的多少自动改变高度
Box2设置float：left
Box1的高度没了
当box2设置浮动后，box2将会脱离文档流，子元素将无法撑开父元素的高度，导致父元素高度丢失，这就是高度塌陷问题 -
image.png
Box3宽高200，蓝色
image.png
如果box3上来就对布局产生影响了 -
image.png
父元素高度一旦塌陷，后面的元素都会自动上移，导致整个页面布局变的混乱，高度塌陷是使用浮动布局带来的最大的问题，必须要处理
父元素写个高度就不会塌陷了
我们希望的父元素被子元素撑开，而不是把父元素写死
BFC（block formatting context）块级格式化上下文
BFC是元素的隐含属性
当元素开启BFC后会具有如下一些特性
1.开启BFC后子元素外边距不会传递给父元素
2.开启BFC后元素不会被浮动元素所覆盖
3.开启BFC后父元素可以包含浮动的子元素（主要用的这点）
BFC是元素隐含属性无法直接开启，需要通过一些属性间接开启
开启BFC的方式：
1.将元素设置为行内块元素（导致宽度丢失）
-
image.png
给box1设置display：inline-block，高度没塌陷，内容被box2撑开了，但是宽度没了
-
image.png
注意：开启BFC都是间接开启，所以这些样式多多少少会存在一些副作用
2.直接将元素设置浮动，也会开启box1的BFC（导致元素脱离文档流）如果让box1浮动，同时下面的元素也会上移，会导致元素脱离文档流
3.可以将元素的overflow设置为一个非默认值（visible），高度没塌陷，宽度没丢，但是有两个滚动条，这个副作用是有滚动条 -
image.png
通常情况下，可以通过为父元素设置一个overflow：hidden来开启它的BFC，从而解决元素的高度塌陷，哪个高度塌了，就写overflow
写个box1是box2的父元素
Box1宽高300，颜色bfa，box2宽高100，颜色，box2设置margin-top：100，子元素父元素一起下移，可以直接开启box1的BFC，外边距不会传递
Box3，宽高200，颜色，box4，宽高200，颜色 - image.png
开启BFC后子元素的外边距不会传递给父元素
开启BFC后元素不会被浮动元素覆盖
开启BFC后父元素可以包含浮动的子元素
Box3设置浮动
元素不会被浮动元素覆盖
基本上可以解决高度塌陷的问题
清除浮动
Box1，box2，box3，
样式box1，宽高200，颜色；box2宽高300，颜色，橙色，
设置box1左浮动，box2被box1盖住了，box2受到了box1浮动的影响，所以box2的位置会上移
Clear（清除）
清除浮动元素对当前元素的影响，不希望2受到1的影响
可选值
Left 清除左侧浮动元素对当前元素的影响
Right清除右侧浮动元素对当前元素的影响
clear：left，清除浮动
- image.png
Box3宽高300，颜色
-
image.png
让1左浮动，2和3集体上移
现在让box2右浮动
-
image.png
写哪边代表清除哪边浮动元素对第三个的影响
Both 清除两侧浮动元素中对当前元素影响最大的，不是清除浮动，是清除浮动元素产生的影响
Clear的原理
使用clear时，浏览器会自动为当前样式设置一个上margin
利用clear，可以创建一个更完美的解决高度塌陷的方案
- image.png
- body里面所有的都是父子元素
image.png
高度没塌陷
Box2左浮动，脱离文档流高度塌陷
Box3，没浮动，实际上可以撑开box1的高度
::after，元素结尾位置
清除浮动
clear：both；
转换块元素
Display：block； -
image.png
clearfix 清除修复
外边距折叠问题
Box1是box2子元素
设颜色
Box2设margin-top：100px，外边距传递
-
image.png
::before{} 外边距折叠问题
display：block不能隔开外边距，用table可以，所以display：table；隔开外边距，所有将display设成table -
image.png
完整的clearfix.可以同时解决高度塌陷和外边距折叠问题 - image.png
