浮动的工作原理及清除浮动的技巧

导语   浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。  1 使用空标签清除浮动。  这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both 弊端就是增加了无

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

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

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

  2.使用overflow。

  给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

  3.使用after伪对象清除浮动。

  该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0,否则该元素会比实际高出若干像素;

  浮动元素引起的问题和解决办法?

  浮动元素引起的问题:

  (1)父元素的高度无法被撑开,影响与父元素同级的元素

  (2)与浮动元素同级的非浮动元素(内联元素)会跟随其后

  (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

  解决方法:

  使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

  .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

  .clearfix{display: inline-block;}

  清除浮动的几种方法:

  1,额外标签法

  1. <div style="clear:both;"></div> 
(缺点:不过这个办法会增加额外的标签使HTML结构看起来不够简洁。)

  2,使用after伪类

  css 代码

  #parent:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; }

  3,浮动外部元素

  4,设置overflow为hidden或者auto

http://www.aseoe.com/ true 浮动的工作原理及清除浮动的技巧 http://www.aseoe.com/show-11-935-1.html report 1023.5   浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。  1 使用空标签清除浮动。  这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both 弊端就是增加了无
TAG:浮动 清除浮动 技巧
本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-11-935-1.html
[ 扫一扫,在手机上阅读 ]

[前端插件推荐] Plugin

1 2 3 4
  • jQuery实现逐字逐句显示插件l-by-l.min.js
  • jQuery带方向感知的鼠标滑过图片边框特效插件
  • jQuery HotKeys监听键盘按下事件keydown插件
  • 响应式无限轮播jQuery旋转木马插件
响应式无限轮播jQuery旋转木马插件
web前端开发
爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)