面试题及答案Q：如何清浮？答：如果我们知道浮动元素在哪里，我们可以在元素样式中使用clear:both来清除元素相邻标签的浮动。此外，我们还有三种清除浮动的技巧：1、给父元素添加overflow属性；2.在浮动元素的父元素的结束标签前添加一个空的块级元素，然后给块级元素添加clear:bothCSS属性。3、使用伪元素:after，在父元素上添加一个clearfix样式类，声明clearfix:after{content:".";可见性：隐藏；显示：块；高度：0；clear:both;}清除浮动的样式。什么是浮动？Float是一个CSS定位属性。在了解浮动属性的用途和设计初衷之前，我们先来看一下打印设计。在印刷设计布局中，可以将图像放置在页面上，以便文本根据需要环绕它们。这种方法通常被称为“文本环绕”，下面是一个例子。在页面布局项目中，框Box“被文本包裹”可以控制被包裹的文本是“包裹”它还是忽略它。忽略文本环绕，让文本环绕图像，就好像图像不存在一样。WEB网页设计与它非常相似。在网页设计中，应用了CSSfloat属性的页面元素就像印刷设计布局中的图像，文本在图像周围流动。应用了CSSfloat属性的HTML元素仍然是网页正常流程的一部分。这明显不同于使用绝对定位位置属性定义的页面元素。绝对定位的页面元素被移出网页的正常流程。绝对定位的页面元素不会影响其他元素的布局，其他元素也不会影响它们，无论应用标签是否接触。设置了float属性的元素通常是这样的：#footer{float:right;}float属性有四个有效值。left和right代表浮动元素的方向。None（默认值）表示元素不浮动，Inherit表示继承父元素的浮动值。浮动可以做什么除了围绕图像包装文本的简单示例外，浮动还可以用于创建整个Web布局。浮动还有助于较小实例的布局。以网页的这一小块区域为例。如果我们为我们的小头像使用浮动，当图像调整大小时，框中的文本将重新排列以适合：相同的布局可以通过在父级上的相对定位和在子级上的绝对定位来实现。不过，这样一来，文本就不会受到头像的影响，并且在大小发生变化时也无法重排。浮动的常见用法有以下几种：textwrapping_case下沉第一个word_case多栏布局二栏layout_case三栏布局_clearfloatingfloat有一个姐妹属性clear；设置了clear属性的元素不是像浮动那样向上移动到浮动附近，而是向下开始一个新行。如下图，当MainContent和Sidebar设置为float时，没有明确的属性。在上图的例子中，Sidebar向右浮动，高度比MainContent矮。如果有足够的空间，Footer将被调整到浮动元素的底部。为了解决这个问题，可以给footer设置clear属性，清除两边的浮动，保证它运行在两列下方。#footer{clear:both;}清除clear属性有五个值：both、left、right、none、inherit。默认为none.left清除左浮动right清除右浮动none默认值，一般不用，除非一个有clear属性的内容从级联中删除inherit元素继承其父元素的值both是最常用，清除左侧和右侧使用浮动属性最令人头疼的问题之一是它们如何影响包含它们的元素（它们的“父”元素）。如果父元素只包含浮动元素，它的高度实际上会折叠为零。您可能无法判断父级是否不包含任何视觉上不同的背景，但请务必注意。尽管折叠父元素是违反直觉的，但有些替代方案更糟。考虑这种情况：如果顶部块元素自动扩展以容纳浮动元素，我们将在段落之间的文本流中出现不自然的间距中断，并且没有实际修复。如果是这种情况，我们设计师可能会比我们抱怨折叠（折叠）问题更多地抱怨这种行为。几乎总是需要处理折叠（collapses）以防止奇怪的布局和跨浏览器问题。我们通过在元素漂浮在容器中但在容器关闭之前清除浮动来修复它。清除浮动技术当我们确切知道浮动元素的位置时，我们可以简单地使用clear:both。但是确切地知道浮动元素在哪里是理想的，我们需要更多工具来清除工具箱中的浮动元素。常用的有：溢出伪元素：空d??iv标签后溢出方法overflow溢出方法依赖于在父元素上设置overflowcss属性。如果此属性在父元素上设置为自动或隐藏，则父元素将扩展以包含浮动，从而有效地清除后续元素的浮动。这种方法可能看起来具有更好的语义，因为它可能不需要额外的元素。但是，如果您发现自己添加了一个新的div来应用它，那么它与空div方法一样没有语义且适应性较差。还要记住，溢出属性不是为清除浮动而设计的，注意不要隐藏内容或触发不必要的滚动条。顾名思义，一个空的div标签就是一个空的div标签，div标签
