您当前位于：
HTML5面试题 ——> WEB前端面试真题 - 什么是浮动，浮动会造成什么影响
WEB前端面试真题 - 什么是浮动，浮动会造成什么影响
2015/05/03 20:08:49
|
作者：HTML5学堂（码匠）
|
分类：HTML5面试题
|
关键词：前端面试题,浮动元素,float
浮动元素面试题
HTML5学堂：这道题是阿里巴巴的WEB前端开发面试题，主要考察的是浮动布局以及IE6的3像素兼容问题。之前给自己班里孩子们出这道题，孩子们有点想疯的欲望，所以，还是写一下吧。
需要实现的浮动效果
基本的代码实现
-
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>浮动元素 面试题 WEB前端开发</title>
-
<meta author='独行冰海 HTML5学堂 H5course' />
-
<link rel="stylesheet" type="text/css" href="reset.css">
-
<style>
-
div{background:#fcc;}
-
.first{float:left;width:100px; height:150px}/*第一个块发生浮动*/
-
.second{clear:left;float:left;margin-top:10px;width:100px;height:150px}/*第二个块先清除浮动再发生浮动*/
-
.third{zoom:1; width:200px;height:310px;margin-left:110px;_margin-left:107px; }
-
</style>
-
</head>
-
<body>
-
<div class="first">1</div>
-
<div class="second">2</div>
-
<div class="third">3</div>
-
</body>
-
</html>
这道浮动元素的WEB前端面试题里，有两个地方需要注意，其一就是第二个块的设置：需要先清除浮动，然后再向左进行浮动，从而使得第二个块摞在第一个块的下面
第二个需要注意的地方就是，由于浮动元素和非浮动元素处于同一行，即第三个块和第一二个块同行显示，在IE6下会有bug。需要触发IE6的haslayout（使用zoom:1），同时IE6下会有3像素的bug，因此在此处添加“_margin-left : 107px”
欢迎沟通交流~HTML5学堂
阅读：914
极客编程技术分享
