方法一: 使用clear属性的空元素

<div style="clear:both;"></div>

方法二:使用overflow属性

给浮动的元素容器添加overflow:hidden/auto;

在添加overflow属性后,浮动元素又回到了容器层,把容器层撑起来,达到清理浮动的效果

另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

方法三:给浮动元素后边的元素添加clear元素

方法四:使用css的:after伪元素

.clearfix:after {

content:'020';

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix {

zoom:1;

}

css 清楚浮动的几种方式的更多相关文章

  1. css清除浮动的两种方式(clearfix和clear)

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  2. css清除浮动的几种方式,哪种最合适?

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  3. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  4. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  5. css清除浮动的3种方式

    前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...

  6. css 清楚浮动的8种方式

    清除浮动是每个 web前台设计师必须掌握的机能. css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同一时候会影响到前后标签.父级标签的位置及 width height 属性.并且相 ...

  7. css 清除浮动的几种方式

    1.给浮动的元素的父级添加 overflow:hidden;属性 ul>不浮动 添加overflow:hidden; li>浮动 2.给浮动的元素的父级添加after伪类 ul:after ...

  8. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  9. css考核点整理(一)-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

随机推荐

  1. clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    clientHeight:包括padding但不包括border.水平滚动条.margin的元素的高度.对于inline的元素这个属性一直是0,单位px,只读元素. offsetHeight:包括pa ...

  2. HTML5本地存储之本地数据库篇

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. Go语言学习之12 etcd、contex、kafka消费实例、logagent

    本节内容:    1. etcd介绍与使用    2. ElastcSearch介绍与使用 1. etcd介绍与使用    概念:高可用的分布式key-value存储,可以使用配置共享和服务发现    ...

  4. kali linux 无线网络显示 wireless is disabled

    试了 rfkill , iwconfig , ifconfig , airmon-ng airodump-ng , 都显示,硬件是绝对没有问题了. 连 各种ap 都显示出来了. 最后google 之后 ...

  5. 【转】RTP学习笔记

    转自:https://www.cnblogs.com/yoyotl/p/5650101.html 一.定义 实时传输协议(Real- time Transport Protocol,RTP)是在Int ...

  6. 20190321xlVBA_明细信息表汇总成数据表

    刚开始能把代码敲得行云流水的时候,写代码是种乐趣.有了功利目的之后,重复的工作写多几次,厌烦的情绪四处弥漫. 去年八月份正好写了一回,还能支持控件,在此备忘. Public Sub Informati ...

  7. 怎么样获取小米手机4的ROOT超级权限

    小米手机4有何方法开通了Root超级权限?各位都清楚,Android手机有Root超级权限,一旦手机开通了root相关权限,能够实现更强大的功能,打比方各位部门的营销部门的妹纸,使用个别营销工具都需要 ...

  8. 升级node后还是原来版本问题

    解决升级node后,已经安装了最新的版本,但是默认的node版本不是最新版本还是当前版本. 最近遇到个错误:The engine node is incompatible with this modu ...

  9. 毕设记录(ajax)

    有关ajax的cache属性值 cache作用:是否在缓存中读取数据的读取. cache属性是true(默认值)时:在第一次请求完成之后,如果地址和参数不变化,第二次去请求,会默认获取缓存中的数据,不 ...

  10. 【C/C++】C++11 Variadic Templates

    Variadic Templates 1.function template:利用“参数个数逐一递减”的特性,实现递归函数调用 template <typename T, typename... ...