关于clearfix清除浮动
清除浮动（clearfix和clear）的用法示例介绍
清除浮动（clearfix和clear）的⽤法⽰例介绍本⽂主要是讲解如何在 html 中使⽤ clearfix 和 clear，针对那些刚开始了解 css 的童鞋。
关于 clearfix 和 clear 的样式在这⾥我就不写了。
下⾯就谈谈对于这两个 class 的⽤法，⾸先我们先看个例⼦：复制代码代码如下:<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>如何在html中使⽤clearfix和clear</title><link rel="stylesheet" type="text/css" href="/css/base.css" media="all"/><style type="text/css">.fl{float:left;}.demo{background:#ccc;}.item1{background:#f90;height:100px;width:100px;}.item2{background:#fc0;height:200px;width:100px;}</style></head><body><div class="demo"><div class="fl item1"></div><div class="fl item2"></div></div></body></html>我们都知道使⽤浮动会产⽣很多未知的问题，通过上⾯的例⼦我们可以发现 class="demo" 的⾼度并没有被⾥⾯的 div 给撑开，这是因为⾥⾯的 div 产⽣浮动⽽脱离了该⽂档，因为 demo 本⾝没有⾼度，所以我们看不到它的灰⾊背景。
clearfix的用法
clearfix的⽤法那段代码是⽤来清除浮动的。
以下代码可以这么解释：.clearfix:after { <----在类名为“clearfix”的元素内最后⾯加⼊内容；content: "."; <----内容为“.”就是⼀个英⽂的句号⽽已。
也可以不写。
display: block; <----加⼊的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。
注意它和display:none;是有区别的。
仍然占据空间，只是看不到⽽已；height: 0; <----⾼度为0；font-size:0; <----字体⼤⼩为0；}整段代码就相当于在浮动元素后⾯跟了个宽⾼为0的空div，然后设定它clear:both来达到清除浮动的效果。
（这个css的原理是经过使⽤ after 伪对象,它将在应⽤clearfix的元素结尾添加content中的内容,也就是⼀个".",并且把他设置为块级元素 (display="block");⾼度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.）之所以⽤它，是因为，你不必在html⽂件中写⼊⼤量⽆意义的空标签，⼜能清除浮动。
.clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不⽀持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。
具体意思的话，不⽤深究，听说微软的⼯程师⾃⼰都⽆法解释清楚。
height:1%效果也是⼀样。
CSS居中浮动元素的使用方法
CSS居中浮动元素的使用方法
一、关于CSS居中浮动元素介绍
CSS居中浮动元素（Float Centered Element）是指在CSS中使用浮
动（float），让块状元素居中显示的方式。
这是一种在页面编码中使用
浮动来实现居中的技术，而不是使用定位（position）的技术。
CSS居中浮动元素是建议的CSS布局方案，它能够帮助提高代码的可
阅读性，同时还具有跨浏览器兼容性的优势。
它的典型应用场景是，当需
要在网页上水平居中显示一个或多个元素时，可以将浮动元素设置为居中，而不需要使用定位，也不会改变元素的初始HTML结构。
1、将父元素设置为“绝对定位”（position:absolute），设置其相
对定位为“居中”（top:50%; left:50%;），实现相对父元素居中的效果。
2、设置子元素的“浮动”（float）属性，使其实现左右居中的效果。
3、设置子元素的“绝对定位”（position:absolute），并设置其相
对定位为“左边”（left:0;），实现左对齐的效果。
4、如果需要调整垂直方向的居中效果，可以使用margin属性来实现，例如：margin:0 auto;
5、如果需要在浮动元素之间添加间距，可以使用margin属性来实现，例如：margin-left:20px;
6、如果有多个浮动元素，可以使用“清除浮动”（clearfix）的方法，来解决子元素之间的重叠问题。
Bootstrap面试题
Bootstrap⾯试题1.⽤bootstrap中的栅格做⽹页布局的基本结构是什么?默认将⼀⾏分为多少列?答案:容器中设置⾏,⾏内设置列.默认将⼀⾏分为12个单元格(列)2.如何编写响应式⽹页?答案:(1)声明viewport元标签(2)所有容器/⽂字/图⽚使⽤相对尺⼨(3)流式布局+弹性布局(4)使⽤CSS3 MediaQuery技术3.同时监听多个scss⽂件的命令是什么?答案:node-sass -w scss⽂件夹 -o css⽂件夹4.在scss中如何定义混合器以及引⽤?答案:@mixin 混合器名称{ 样式声明 }通过@include来使⽤混合器.5.对于各类尺⼨的设备,Bootstrap设置的class前缀分别是什么?超⼩设备⼿机( <767px ): .col-xs-⼩型设备平板电脑( >=768px ): .col-sm-中型设备台式电脑( >=992px ): .col-md-⼤型设备台式电脑( >1200px ): .col-lg-6.Bootstrap如何设置响应式表格?增加class="table-responsive"7.使⽤Bootstrap激活或禁⽤按钮要如何操作?激活按钮:给按钮增加.active的class禁⽤按钮:给按钮增加disabled="disabled"的属性8.Bootstrap有哪些关于<img>的class(1) .img-rounded为图⽚添加圆⾓(2) .img-circle 将图⽚变为圆形(3) .img-thumbnail 缩略图功能(4) .img-responsive 图⽚响应式(将很好地扩展到⽗元素)9.Bootstrap中有关元素浮动及清除浮动的class?class="clearfix" 清除浮动10.Bootstrap如何制作下拉菜单?(1)将下拉菜单包裹在class="dropdown"的<div>中;(2)在触发下拉菜单的按钮中添加:class="btn-dropdown-toggle"id="dropdownMenu1" data-toggle="dropdown"(3)在包裹下拉菜单的ul中添加:class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" (4)在下拉菜单的列表项中添加:role="presentation", 其中,下拉菜单的标题要添加class="dropdown-header",选项部分要添加tabindex="-1".11.Bootstrap如何制作按钮组?⽤class="btn-group"的<div>去包裹按钮组;class="btn-group-vertical"可设置垂直按钮组.12.Bootstrap中的导航都有哪些?(1)导航元素:有class="nav nav-tabs"的标签页导航,还有class="nav nav-pills"的胶囊式标签页导航;(2)导航栏:class="navbar navbar-default" role="navigation";(3)⾯包屑导航:class="breadcrumb"13.Bootstrap中设置分页的class?默认的分页:class="pagination"14.Bootstrap中如何制作徽章?<span class="badge">26</span>15.Bootstrap中超⼤屏幕的作⽤是什么?设置 class="jumbotron"可以制作超⼤屏幕,该组件可以增加标题的⼤⼩并增加更多的外边距.16.Bootstrap⽹格系统列与列之间的间隙宽度是多少?答案:间隙宽度为30px (⼀个列的每边分别是15px).17.⽤Bootstrap,如何设置⽂字的对齐⽅式?class="text-center" 设置居中⽂本class="text-right" 设置向右对齐⽂本class ="text-left" 设置向左对齐⽂本。
bootstrap面试题及答案
bootstrap面试题及答案Bootstrap，来自Twitter，是目前最受欢迎的前端框架。
Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web 开发更加快捷。
1.什么是Bootstrap网格系统（GridSystem）？Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。
它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
2.doctype（文档类型）的作用是什么？知道多少种文档类型？此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML4.01规定了三种文档类型：Strict、Transitional以及Frameset。
XHTML1.0规定了三种XML文档类型：Strict、Transitional以及Frameset。
Standards（标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
3.data-属性的作用是什么？属性用于存储页面或应用程序的私有自定义数据。
data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。
存储的（自定义）数据能够被页面的JavaScript中利用，以创建更好的用户体验。
4.用过媒体查询，或针对移动端的布局/CSS吗？媒体查询，就是响应式布局。
通过不同的媒介类型和条件定义样式表规则。
媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法：@media设备名only（选取条件）not（选取条件）and（设备选取条件），设备二{sRules}。
5.对于各类尺寸的设备，Bootstrap设置的class前缀分别是什么？超小设备手机（<768px）：。
清除浮动的几种方法
清除浮动的几种方法在网页设计中，浮动是一种常见的布局方式，可以实现元素的左右浮动，使得页面排版更加灵活多样。
但是，浮动元素可能会导致一些布局问题，如父元素高度塌陷、重叠覆盖等。
因此，清除浮动就成为了网页设计中一个需要重点关注的问题。
本文将介绍几种清除浮动的方法，希望能够帮助大家更好地解决相关的布局难题。
一、使用clear属性清除浮动。
clear属性是一种常见的清除浮动的方法，通过在父元素中添加clear属性，可以清除浮动元素对父元素的影响。
clear属性有left、right、both三个值，分别表示清除左浮动、右浮动和两者的浮动。
例如，可以在父元素的样式表中添加clear:both，来清除浮动元素对父元素的影响。
二、使用overflow属性清除浮动。
overflow属性也是一种常见的清除浮动的方法，通过在父元素中添加overflow属性，可以清除浮动元素对父元素的影响。
可以给父元素添加overflow:hidden或overflow:auto来实现清除浮动的效果。
这种方法的好处是不需要添加额外的标签，只需在父元素的样式表中添加overflow属性即可。
三、使用after伪元素清除浮动。
在CSS3中，可以使用after伪元素来清除浮动。
通过在父元素中添加一个空的after伪元素，并设置clear:both，可以清除浮动元素对父元素的影响。
这种方法不会增加额外的标签，对页面结构影响较小，是一种比较便捷的清除浮动的方法。
四、使用clearfix类清除浮动。
clearfix类是一种常见的清除浮动的方法，通过在父元素中添加一个clearfix类，可以清除浮动元素对父元素的影响。
可以在样式表中定义clearfix类，设置clear:both，然后在需要清除浮动的父元素中添加该类即可实现清除浮动的效果。
这种方法的好处是可以在需要清除浮动的地方灵活添加和删除clearfix类，对页面布局影响较小。
总结。
清除浮动是网页设计中一个需要重点关注的问题，本文介绍了几种常见的清除浮动的方法，包括使用clear属性、overflow属性、after伪元素和clearfix类。
取消浮动塌陷的方法
取消浮动塌陷的方法
取消浮动塌陷的方法有以下几种：
1. 父元素设置高度：如果一个元素要浮动，那么它的祖先元素一定要有高度。
高度的盒子，才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。
所以就是清除浮动带来的影响了。
2. 使用伪类after和clearfix：使用伪类:after和clearfix可以解决高度塌陷的问题。
具体做法是在父元素的样式中添加一个:after伪类，并设置其content属性为""，然后添加clearfix类。
3. BFC（Block Formatting Context）：BFC是一个防止高度塌陷的方法。
BFC可以防止垂直外边距叠加，并且可以防止元素脱离文档流。
要使用BFC，只需将父元素的display属性设置为block或inline-block，并将overflow 属性设置为hidden或auto。
4. 使用flex布局：Flex布局是一种现代的布局方式，可以轻松地解决高度
塌陷的问题。
将父元素设置为flex容器，然后使用justify-content和
align-items属性来对齐子元素。
5. 使用grid布局：Grid布局也是一种现代的布局方式，可以轻松地解决高度塌陷的问题。
将父元素设置为grid容器，然后使用grid-template-rows 和grid-template-columns属性来对齐子元素。
以上是几种常见的取消浮动塌陷的方法，可以根据具体情况选择适合的方法来解决高度塌陷的问题。
前端面试常见知识点
前端⾯试常见知识点1、JavaScript this指针、闭包、作⽤域this：指向调⽤上下⽂闭包：内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
当其中⼀个这样的内部函数在包含它们的外部函数之外被调⽤时，就会形成闭包。
闭包的好处：（1）不增加额外的全局变量，（2）执⾏过程中所有变量都是在匿名函数内部。
闭包的缺点：（1）滥⽤闭包函数会造成内存泄露，因为闭包中引⽤到的包裹函数中定义的变量都永远不会被释放，内存消耗很⼤，所以不能滥⽤闭包，否则会造成⽹页的性能问题，在IE中可能导致内存泄露。
解决⽅法是，在必要的时候，及时释放这个闭包函数,(在退出函数之前，将不使⽤的局部变量全部删除。
)（2）闭包会在⽗函数外部，改变⽗函数内部变量的值。
所以，如果你把⽗函数当作对象（object）使⽤，把闭包当作它的公⽤⽅法（Public Method），把内部变量当作它的私有属性（private value），这时⼀定要⼩⼼，不要随便改变⽗函数内部变量的值。
作⽤域：作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可见性和⽣命周期。
在JavaScript中，变量的作⽤域有全局作⽤域和局部作⽤域两种。
全局作⽤域:在代码中任何地⽅都能访问到的对象拥有全局作⽤域（1）最外层函数和在最外层函数外⾯定义的变量拥有全局作⽤域（2）所有末定义直接赋值的变量⾃动声明为拥有全局作⽤域（3）所有window对象的属性拥有全局作⽤域局部作⽤域（Local Scope） :和全局作⽤域相反，局部作⽤域⼀般只在固定的代码⽚段内可访问到，最常见的例如函数内部，所有在⼀些地⽅也会看到有⼈把这种作⽤域称为函数作⽤域，2. Javascript作⽤域链?理解变量和函数的访问范围和⽣命周期，全局作⽤域与局部作⽤域的区别，JavaScript中没有块作⽤域，函数的嵌套形成不同层次的作⽤域，嵌套的层次形成链式形式，通过作⽤域链查找属性的规则需要深⼊理解。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
起源：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
说明：
* *对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。
* *第二条为clearfix应用inline-table 显示属性，仅仅针对IE/Mac。
*利用* / 对IE/Mac 隐藏一些规则：
* * height:1% 用来触发IE6 下的haslayout。
* *重新对IE/Mac 外的IE应用block 显示属性。
* *最后一行用于结束针对IE/Mac 的hack。
由于此方法针对的浏览器或成为历史（尤其是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就不再那么与时俱进了。
抛掉对IE/Mac 的支持之后，新的清除浮动方法：
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
说明：
IE6 和IE7 都不支持:after 这个伪类，因此需要后面两条来触发IE6/7的haslayout，以清除浮动。
幸运的是IE8支持:after 伪类。
因此只需要针对IE6/7的hack了。
糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。
我在想作者为什么不直接用* 来直接对IE6/7 同时应用zoom:1 或者直接就写成：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}
以我目前的浅薄认知来讲，以上写法应该也可以直接达到同样效果。
关于这个地方，在文章的评论里也有些讨论，我希望再听听大家的高见。
我平时都是用overflow:hidden 来清除浮动的，因为够简单粗暴。
但是overflow 有时候也不太适用：
父级元素使用overflow:hidden 时，如果其子元素定位到部分或全部在父元素之外，父元素就会对超出其外的子元素部分进行裁剪。
对css3 来说，也会overflow:hidden 也会对一些属性产生影响。
例如box-shadow, 当父元素使用overflow:hidden 属性时，box-shadow 会被裁剪。
其他可能被影响的元素如text-shadow 和transform。
可以参考Andy Ford 的demo
对于那些不愿意再给标签添加额外的clearfix 类来清除浮动的人来说，直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。
.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}
这种情况下，html 和css 文件就像一个跷跷板的两头。
html 代码倒是整洁了，css 代码却出现了一定的繁冗。
而且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。
归结下来，还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，但是现在更倾向于使用clearfix，感觉这种一体化的东西更靠谱，能避免偶尔对zoom 的遗忘。
成熟的东西稳定性好，但是会比较复杂、厚重;简单的灵活性好，但是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题本身还让人头疼.
我个人的想法是没有好与坏的区别，只有合适不合适的区别。
但是我们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。
经常可见对一些工具的讨论，都是奔
着争出个谁好谁坏而去的，例如jQuery mootools YUI.相比起到底是好谁坏，我们还是最好赶紧转变思想，摒弃"一刀切"的思想吧。
本文转自：前端观察
以下代码可以这么解释：
.clearfix:after { <----在类名为"clearfix"的元素内最后面加入内容；
content: "."; <----内容为"."就是一个英文的句号而已。
也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。
注意它和display:none;是有区别的。
visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
.clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。
具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。
height:1%效果也是一样。
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
话说回来，你这段代码真是个累赘啊，这样写不利于维护。
只要写一个.clearfix就行了，然后在需要清浮动的元素中添加clearfix类名就好了。
如：
<div class="head clearfix"></div>
你明白float:left
div1 设置了float:left, div2也设置了float:left,
div3不想要连接在div2屁股后面。
就在div3前面加一个<div class="clear"></div>
这样。
div3就会在下面一排出现。
当然。
还有N多种情况等你自己发现
.clear{cleat:both;}
至于开父层元素这个。
最好是少用。
设置好大体的框架。
在来做里面的。
如果真的要做特效。
用定位做。