浮动元素引起的问题和解决办法

浮动元素引起的问题

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的几种方法

额外标签法

<div style="clear:both;"></div>

缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

使用after伪元素

#parent:after{
    content : ".";
    height : 0;
    visibility : hidden;
    display : block;
    clear : both;
}

父元素也设置浮动

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用 

设置 overflow 为 hidden 或者 auto

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！