方法一: 使用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. Android系统下app测试功能点

    一.安装卸载 1.验证app能否正常的安装启动运行,安装后的文件夹及文件是否写到了指定的目录里,卸载后相关文件是否清除 2.软件安装/卸载过程中意外情况的处理是否符合需求(如死机,重启,断电) 3.安 ...

  2. Flex4之皮肤定制

    Flex4之皮肤定制[Skin类和Skin类]          博客分类: RIA-Flex4专栏 FlexAdobeUPFlashUI 第一.关于spark.skin.SparkSkin类的 1. ...

  3. 在chrome上隐藏video的option按钮

    隐藏方法: video::-webkit-media-controls{ overflow:hidden !important;}video::-webkit-media-controls-enclo ...

  4. 【PHP函数】PHP 去掉字符串中的转义符号

    PHP字符串中的转义符号 string stripslashes ( string $str ) //去掉字符串中的反斜线字符.若是连续二个反斜线,则去掉一个,留下一个.若只有一个反斜线,就直接去掉.

  5. istio-mix介绍

    mixer 概念 Mixer 是负责提供策略控制和遥测收集的 Istio 组件: 在每次请求执行先决条件检查之前以及在每次报告遥测请求之后,Envoy sidecar 在逻辑上调用 Mixer. 主要 ...

  6. 利用python解析地址经纬度和利用经纬度定位地址

    解析地址经纬度 from geopy.geocoders import Nominatim try: geolocator = Nominatim() location = geolocator.ge ...

  7. MySQL安装脚本0104-亲试ok

    #!/bin/bash export host_ip=192.168.7.79 export password=123456   echo '#1.取master主机ip的后三位作为master的se ...

  8. [linux]关于deepin截图软件在KDE桌面下无法使用粘贴的解决方法

    -------更新----- 1.其实不如直接关闭klipper启动程序 # rm -rf /usr/share/plasma/plasmoids/org.kde.plasma.clipboard 2 ...

  9. css 积累

    1.input 初始化 input { -webkit-tap-highlight-color: rgba(0,0,0,0); border: none; } input:focus { outlin ...

  10. js生成二维码 qrcode

    js生成二维码 QRcode npm 地址 1.安装qrcode //在项目文件夹中执行: npm install --save qrcode //或者,将其全局安装以使用qrcode命令行来保存qr ...