浮动原理与题目

[TOC]

浮动

定义

把元素从常规文档流中拿出来，不被包含在标记中的父元素之内了

目的1：实现文字围绕图片效果

<style>
    p {margin:0; border:1px solid red;} 
    img {float:left; margin:0 4px 4px 0;}
</style>        

<img …… /> 
<p>…the paragraph text…</p> 

目的2：创建多栏布局

p {
    float:left; 
    margin:0; 
    width:200px;
    border:1px solid red;
} 
img {
    float:left; 
    margin:0 4px 4px 0;
} 

几个相邻元素都设定了宽度，都是浮动的，水平空间足够。这样就会并排在一行。

围住浮动元素的三种方法（清除浮动）

为父元素添加overflow：hidden

• overflow：hidden用途1：放置包含元素被超大内容成大，包含元素依然保持其设定的宽度，超大的内容会被容器切割掉
• overflow：hidden用途2：强迫父元素包含其浮动的子元素

overflow:hidden

让父元素也浮动起来

• 父元素浮动，且width:100%与浏览器容器同宽;
• 下方元素用clear:both，被清除的元素不会提升到浮动元素旁边

添加飞浮动的清除元素（clearfix原则）

题目1:解释下浮动和它的工作原理？清除浮动的技巧

回答：（评价：前两个概念不清，技巧的理解不深入）

什么是浮动？浮动的工作原理是什么？

浮动就是元素脱离文档流，无视旁边的块级元素，朝左或朝右

清除浮动的几种方式？

• 父元素使用overflow:hidden
• clearfix原则（跟伪元素相结合，比如:after/:before）
• 父元素也使用浮动，但设置width，再后面的元素使用clear:both

答案：

浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。；

1. 使用空标签清除浮动。

这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。

整理：

题目2:浮动元素引起的问题和解决办法？