HTML5学堂-码匠 HTML5学堂

您当前位于:面试题精讲 ——> WEB前端面试真题 - 什么是浮动,浮动会造成什么影响

WEB前端面试真题 - 什么是浮动,浮动会造成什么影响

2015/05/03 20:08:49 | 作者:HTML5学堂(码匠) | 分类:面试题精讲 | 关键词:前端面试题,浮动元素,float

浮动元素面试题

HTML5学堂:这道题是阿里巴巴的WEB前端开发面试题,主要考察的是浮动布局以及IE6的3像素兼容问题。之前给自己班里孩子们出这道题,孩子们有点想疯的欲望,所以,还是写一下吧。

需要实现的浮动效果

HTML5学堂 浮动元素面试题 H5course

基本的代码实现

  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>浮动元素 面试题 WEB前端开发</title>
  6.         <meta author='独行冰海 HTML5学堂 H5course' />
  7.         <link rel="stylesheet" type="text/css" href="reset.css">
  8.         <style>
  9.             div{background:#fcc;}
  10.             .first{float:left;width:100px; height:150px}/*第一个块发生浮动*/
  11.             .second{clear:left;float:left;margin-top:10px;width:100px;height:150px}/*第二个块先清除浮动再发生浮动*/
  12.             .third{zoom:1; width:200px;height:310px;margin-left:110px;_margin-left:107px; }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <div class="first">1</div>
  17.         <div class="second">2</div>
  18.         <div class="third">3</div>
  19.     </body>
  20. </html>

这道浮动元素的WEB前端面试题里,有两个地方需要注意,其一就是第二个块的设置:需要先清除浮动,然后再向左进行浮动,从而使得第二个块摞在第一个块的下面

第二个需要注意的地方就是,由于浮动元素和非浮动元素处于同一行,即第三个块和第一二个块同行显示,在IE6下会有bug。需要触发IE6的haslayout(使用zoom:1),同时IE6下会有3像素的bug,因此在此处添加“_margin-left : 107px”

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS