浮动！！！
一、css新增的三种样式 1.圆角边框 在边框的四周有一个圆形转角，让盒子视觉效果更好。 1.1、圆角边框的属性：border-radius。
怎么做圆形？border-radius: 50% 正方形为圆形，矩形为椭圆。怎么做圆角矩形？border-radius: 高度的一半。怎么设置不同的圆角？border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）2、盒子阴影（box-shadow） 2.1、盒子阴影的属性（不需要硬记）：
h-shadow 必须，x 偏移量，允许负值v-shadow 必须，y 偏移量，允许负值blur 可选，阴影模糊半径spread 可选，阴影扩散半径color 可选，阴影颜色inset 可选，内部阴影，直接写单词即可2.2、盒子阴影会影响盒子大小吗？不会 2.3、div 能使用 :hover 吗？为什么？可以，伪类是状态 / div 同样存在鼠标经过状态
3、文字阴影（text-shadow） 3.1、文字阴影的属性（不需要硬记）：
h-shadow 必须，x 偏移量，允许负值v-shadow 必须，y 偏移量，允许负值blur 可选，阴影模糊半径color 可选，阴影颜色二、浮动基础 1、传统的三种布局方式：标准流（文档流）、浮动、定位。 2、文档流的布局方式：
标签按照规定好的默认方式排列（块级元素、行内元素）；标准流是最基本的布局方式。3、为什么需要浮动? 3.1、浮动能解决什么问题？
让多个块级元素（不改变显示方式）水平排成一行让两个块级元素一个左对齐，一个右对齐4、网页布局的准则：
多个块级元素纵向排列 —— 标准流多个块级元素横向排列 —— 浮动5、什么是浮动？ 5.1、浮动的概念是什么？
float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 5.2、浮动的方向和写法
右浮动：float：right；左浮动：float：left；6、浮动的特性-脱标 6.1、元素浮动之后的特性：
脱离标准流（脱标）一行显示并且顶部对齐具有行内块元素的特性6.2、盒子脱标后还会保留原有位置吗？表现是什么？
不会后续的盒子会占据被浮动盒子原有的位置7、浮动特性-浮动元素一行显示 7.1、几个浮动元素之间会有缝隙吗？会按照什么方式对齐？
不会有缝隙（与 inline-block 不同）会按照顶部对齐7.2、如果父级盒子宽度装不下浮动的盒子，会发生什么情况？
上一排空间不够的盒子会被挤下来8、浮动特性-浮动元素具有行内块特性 8.1、行内元素能使用浮动吗？浮动之后能指定宽高吗？
行内元素同样可以使用浮动行内元素浮动之后可以指定宽高8.2、行内元素有了浮动属性后，还需要使用 display: inline-block 吗？
行内元素浮动之后可以指定宽高，不再需要转换显示模式8.3、如果没有给块级盒子设置宽度，默认宽度是什么？浮动之后的宽度是什么？
默认宽度是父级盒子的宽度浮动之后宽度由内容来决定9、浮动元素经常搭配标准流的父元素 9.1、在网页布局时，标准流的父盒子负责什么？
标准流的父盒子排列上下位置9.2、在网页布局时，浮动的子盒子负责什么？
浮动的子盒子负责在父盒子中横向排列10、浮动总结 10.1、 应用场景：与标准流的父盒子搭配使用
标准流父盒子负责上下浮动子盒子负责左右内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容10.2、 浮动的元素会脱标 —— 下方的盒子会占据原有的位置
父盒子中的所有亲儿子盒子一起浮动10.3、 浮动相比较 inline-block 的优势
没有缝隙顶端对齐（ inline-block 会按照文字对齐方式对齐）10.4、初学浮动布局的痛点
务必要控制好每个盒子的宽度，宽度不够会掉下去用调试工具检查盒子位置最靠谱，千万不要盯着代码看{margin: 0; padding: 0} 不要忘三、清除浮动 1、为什么清除浮动？ 1.1、所有父盒子都能准确指定高度吗？
不能1.2、有哪些场景不方便指定盒子高度？
京东商城的产品特别多新闻内容1.3、如果子盒子全部浮动，父盒子的高度能被撑开吗？为什么？
不能盒子浮动后，会脱标，一旦脱标，原有位置不再保留1.4、为什么要清除浮动（面试题）！！！
如果在开发时，不方便给父盒子指定高度，子盒浮动后（脱标），不占有原有位置，导致父盒子高度为 0，最终影响到下方的盒子2、清除浮动本质以及额外标签法 2.1、清除浮动的本质是什么？
清除浮动元素脱标后造成的影响清除浮动后，父盒子可以根据浮动的子盒子自动检测高度，父盒子有了高度，就不会对下方的标准流造成影响了。2.2、清除浮动的属性是什么？
clear: both;2.3、额外标签法如何使用？
在浮动元素末尾添加一个空的 div设置该 div 的样式为 clear: both;2.4、额外标签法有什么优缺点？
优点：通俗易懂 / 书写方便 / W3C 推荐缺点：添加许多无意义的标签，结构化较差3、清除浮动之父元素 overflow 3.1、如何用 overflow 清除浮动？
给父元素添加 overflow 属性，将其属性设置为 hidden 、 auto 、 scroll 都可以；通常设置 overflow: hidden ；3.2、用 overflow 清除浮动有什么优缺点？
优点：代码简单 / 好记忆缺点：无法显示溢出部分，面试会被追问4、清除浮动之 after 伪元素 4.1、 ::after 伪元素清除浮动的代码是什么？
.clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; }4.2、「清除浮动之 after 伪元素」伪类和伪元素
伪类表示标签的某个状态，没有内容，用 : 表示伪元素在标签前 / 后增加内容，有内容但是不需要独立的标签，用 :: 表示 ::after 标签后添加内容 ::before 标签前添加内容5、清除浮动之双伪元素 5.1、双伪元素清除浮动的代码是什么？
.clearfix::before, .clearfix::after { content: ''; display: table; } .clearfix::after { clear: both; }6、清除浮动总结 6.1、为什么清除浮动？
子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子6.2、清除浮动的方法
额外标签法（隔墙法） 通俗易懂，书写简单添加许多无意义的标签，结构化较差父元素 overflow: hidden; 书写简单无法显示溢出部分，面试会被追问父级 after 伪元素 结构语义正确 IE 6~7 不支持伪元素父级双伪元素 结构语义正确 IE 6~7 不支持伪元素