浮动特性以及部分清浮动方法

Posted 2020-10-14 噜噜修

float浮动的特性： 

                        1、块在一排显示
                        2、内联元素支持宽高
                        3、默认内容撑开宽度
                        4、脱离文档流
                        5、阻止margin叠压
浮动：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
部分清浮动的方法：
1.加高度
                        缺点：
                                a.不利于维护
                                b.在内容不确定高度时无法使用
2.inline-block清浮动
                        缺点：
                                a.会产生空格间隙
                                b.无法使用margin左右居中
3.空标签清浮动
                        缺点：
                                a.必须是非内联元素
                                b.但凡使用到浮动都需要加个空标签
4.以浮制浮
                        缺点：
                               a.所有浮动元素的父级都要加浮动,最终加到html上就无法继续清除浮动了
5. <br/>换行符
                        缺点：
                              不符合W3C规范
6.after伪类
                        必须配合content样式使用

WEB前端学习交流群21 598399936