CSS浮动

   欢迎加入前端技术营！如果你也是前端学习者或者对前端有学习的想法，那就跟着我一起从零开始进击前端。
  致力于尽可能详细且简洁的介绍前端知识、自己的捷径，也是学习路上的记录。欢迎探讨

---

目录

一、CSS浮动

二、每日面试题

---

一、CSS浮动

一、传统网页布局的三种方式
标准流
浮动
定位
二、CSS浮动
浮动我在之前写过一篇，重点写了浮动的原理、添加浮动、清除浮动。比较全面，详情戳—>一篇文章让你清楚浮动。
这里再详细介绍下浮动的属性：
语法：

div {
            /* 左浮动 */
            float: left;
            /* 没有浮动 */
            float: none;
            /* 右浮动 */
            float: right;
        }

特性：

• 浮动元素会脱离标准流，浮动的盒子不在保留原先的位子
• 浮动元素会一行内显示并且元素顶部对齐，浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐
• 浮动的元素会具有行内块元素的特性，如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后，它的大小根据内容来决定

使用：用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

浮动的盒子只会影响盒子后面的标准流不会影响前面的标准流

添加浮动、清除浮动等更多更详细内容详情戳—>一篇文章让你清楚浮动。

浮动造我们前面的学习中会经常用到的是非常重要的知识点。

二、面试题

一、各种布局优缺点

1. float 布局
   优点： 比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的缺点：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。

2. 绝对布局
   优点：很快捷，设置很方便，而且也不容易出问题缺点：绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，这就导致了这种方法的有效性和可使用性是比较差的。

3. flex 布局
   优点：简单快捷缺点：不支持 IE8 及以下

4. table布局
   优点：实现简单，代码少缺点：当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，而有时候这种效果不是我们想要的。

5. grid布局
   跟 flex 相似。

二、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
拖拽释放(Drag and drop) API
语义化更好的内容标签（header,nav,footer,aside,article,section）
音频、视频API(audio,video)
画布(Canvas) API
地理(Geolocation) API
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
表单控件，calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation

移除元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；

h5新标签兼容：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->

如何区分：
DOCTYPE声明\新增的结构元素\功能元素

---

本期到这里就结束了，感谢阅读！有问题留言，及时回复

---

• 下期：CSS定位、元素的显示与隐藏
• 点赞加关注，持续更新实用技巧、热门资源、软件教程等
• 有任何 软件 影视 教程资源 考证资料等需求留言即可