Front-end-learning-to-organize-notes
Front-end-learning-to-organize-notes copied to clipboard
Published
20 hours ago •
Chocolate1999
Chocolate1999
浮动布局和flex布局相比有什么优缺点
flex：优点在于其容易上手，根据flex规则很容易达到某个布局效果。缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。 浮动：浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。
- 为 float 元素后的元素添加 clear 属性，clear：both
- 利用伪元素，写一个.clearfix 工具样式，当给需要清除浮动时，就为其加上这个类
- 修改父元素的 owerflow 属性，将父元素的 owerflow 属性修改为 owerflow:auto|hidden