清除浮动的几种方法

1.:after消除浮动,父元素需加zoom:1,建议使用，
2.在父元素的末尾加一个孩子，<div style="clear:both"></div>
3.在父元素中增加overflow:hidden; 不能和position配合使用，因为超出的尺寸的会被隐藏
4.在父元素中增加overflow:auto;前提是必须定义width 或 zoom:1,并且不能定义height
5.父元素一起浮动，不推荐使用
6.给父元素增加display:table,不建议使用

时间： 2024-10-19 03:34:16

清除浮动的几种方法的相关文章

CSS 清除浮动的四种方法

在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字环绕的效果.如果不清除浮动,会导致父元素的高度撑不开等一系列问题. 那如何清除浮动呢?给出以下几种方法,一些不常用的就不说明了. 1.对浮动元素的父容器添加after伪类,并给伪类设置clear属性(给浮动元素的周围元素添加clear属性,清除该浮动元素)在浮动元素的后面增加一个块元素,对块元素设置

css清除浮动的几种方法整理

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type="text/css"> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}

css清除浮动的几种方法以及对应规范说明

css清除浮动的几种方法以及对应规范说明 1.{clear:both;}设置了clear 属性的元素,其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染,使包含浮动元素的容器高度正常.所以适用于浮动元素后面容器之内有个非浮动元素,或是额外添加一个新的空元素. 2..after- clear-float :after{content:""; display:block; clear:both;}利用伪类添加新元素,原理同上,所以只适用于父容器最后一级子元素是浮动的,即

【转】浅谈 CSS 清除浮动的 6 种方法

转载:浅谈 CSS 清除浮动的 6 种方法在开发网页的时候经常需要用到各种浮动,此时便需要及时的清除浮动,否则将会导致布局出现问题引出问题: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black;

[Web 前端] 018 css 清除浮动的四种方法

清除浮动的四种方法加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both(不推荐)(见例2.2) 使用成熟的清浮动样式类 clearfix(见例3) 少废话,上例子例 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test

关于CSS清除浮动的几种方法

如果一个父元素的所有子元素都设置了float效果,则该父元素的高度不会被撑开且颜色也不会显示.这是因为子元素设置float效果后脱离了标准的文档流, 不占据文档空间所以不能把父元素撑开.有时为了解决这个问题可以使用下面几种方法来清除浮动效果. 方法一:使用空标签该方法就是在子元素后再添加一个空标签,空标签可以是<div>也可以是<p>等,但是要设置样式clear : both ;这样就可以达到清除浮动的效果. 方法二:给父元素设置overflow: auto; 该方法是给父元素设

清除浮动的八种方法

清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了.解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题. 下面总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了): 1,父级div定义 height 复制代码

关于清除浮动的几种方法

很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美.闭合浮动元素(或者叫清除浮动)是web标准设计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境.如果你有更好的方法不妨提出来大家一起讨论. 问题的提出: 最简单的一种情形就是我们把一个小的.固定宽度的div元素(比如导航.引用等)和其他元素内容一起包含在一个大的div中.比如下面这段代码: <div id="outer"> <di

CSS 清除浮动的4种方法

此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{flo

CSS清除浮动的三种方法，很实用

CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一. 下面看今天的教程,此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;}