浮动原理与题目

[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:浮动元素引起的问题和解决办法?

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容