清除浮动的几种常见方法

1 <div class="container">
2     <p style="float:left">这是一段浮动文字</p>
3 </div>

1.在container父容器末尾加上一个清除浮动的div标签

1 <div class="container">
2     <p style="float:left">这是一段浮动文字</p>
3     <div style="clear:both"></div>
4 </div>

这种方法的缺点是在html结构中增加了许多无意义的标签

2.给父容器也添加float:left

这种方法不推荐使用,因为一旦html结构层次比较多时,就要不断在每个父容器上添加浮动属性,影响整个页面的布局

3.在父容器上添加overflow属性

添加overflow:auto或者overflow:hidden都可以,添加overflow属性后浮动元素就会重新回到父容器中

4.在父元素添加.clearfix:after(推荐)

1 <div class="container clearfix">
2     <p style="float:left">这是一段浮动文字</p>
3 </div>
 1 .clearfix{
 2     content:".";
 3     display:block;
 4     height:0;
 5     clear:both;
 6     visibility:hidden;
 7 }
 8
 9 .clearfix{    /*兼容IE6、7*/
10     zoom:1;
11 }

这个方法的原理与第一种方法类似,是目前比较推荐的用法

时间: 2024-10-10 18:05:50

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

总结 清除浮动的四种常见方法

1.使用空标签清除浮动. 我用了很久的一种方法,空标签可以是div标签,也可以是P标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both.此方法的弊端在于增加了无意义的结构元素. ps:对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法.至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你也可以使用其它块级元素).不过要注意的是,<br />本身

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

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

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 清除浮动的 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】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

html 清除浮动的几种方式

清除浮动的几种方式? 答:1,父级 div 定义 height 原理:父级 div 手动定义height,就解决了父级 div 无法自动获取到高度的问题. 简单.代码少.容易掌握 ,但 只适合高度固定的布局. 2,结尾处加空 div 标签 clear:both 原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获 取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感觉很不好 . 3,父级 div 定义 伪类:

清除浮动的四种方式及其原理理解

清除浮动的四种方式及其原理理解 本文介绍了四种清除浮动的方法,并尝试解释其原理.在理解了各种清除浮动的原理之后,你会发现,很多清除浮动的方法本质上其实是一样的.掌握这些原理,相信你可以根据场景和需求,灵活运用原则发展出不同的清除浮动的方法,而不再死记或拘泥于文中提到的方法. 一.为什么要清除浮动 在讲清除浮动的方法之前,我们先来了解一下为什么要清除浮动,清除浮动的目的是什么,即,要解决什么样的问题.来看一个浮动的例子(略去了文字内容): <div class="topDiv"&g