前端面试题HTML+CSS基础篇——清除浮动

css清除浮动

//这个也是面试过程中比较常问到的内容，也是基础中的基础

1. 使用带clear属性的空元素

给浮动的元素后面添加一个空白的div，给该div添加clear：both; (在左右两侧均不允许浮动元素,可以根据需要设置左右清除浮动)

// 但该方法会在文档结构中添加无用的元素，增加dom结构，是文档结构复杂化，所以推荐第二种方法

2. 给浮动的元素添加after伪类

.div:after{
	content:'';
	clear:both;
	......
}

// 这种方法就不会有第一种方法中存在的问题，比较推荐使用。

3. 使用css的overflow属性

给浮动的元素添加overflow:hidden/auto;

4. 给浮动的元素的父元素添加浮动

这种方式会使整体浮动，影响布局，不推荐

5. 使用邻接元素进行处理

给浮动的元素后面的元素添加clear属性

//清除浮动的方式大体有这么几种，最最推荐第二种，我在平时清除浮动的时候都是使用第二种，但是由于是参加面试，当然说得越多越好了，而且需要具体介绍，每种方式以及比较突出的优缺点，面试是一个和面试官沟通交流的一个过程，说得越多不仅会消除自己的紧张，也会让面试官觉得你懂得多，敢说敢做，为你大大加分，面试过程中要是大部分时间是你在说，面试官说的少，你就赢了，哈哈哈哈哈哈！！！