CSS 小结笔记之清除浮动

浮动是一个非常好用的属性，但是有时会出现一些问题，需要进行清除浮动。例如

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.fa {background-color: red;width: 600px;/* height: 600px; */}.son1 {width: 200px;height: 200px;background-color: aqua;float: left;}.son2 {width: 300px;height: 200px;background-color: pink;float: left;}.div2 {width: 700px;height: 100px;background-color: orange;}</style>
</head><body><div class="fa">aaa<div class="son1"></div><div class="son2"></div></div><div class="div2"></div>
</body></html>

View Code

在父盒子没有给出高度的情况下，子盒子浮动不会将父盒子撑开来。

清除浮动使用clear:left|right|both 一般使用clear：both，具体方法如下：

1、在浮动标签后边添加一个额外的clear标签例如<div style="clear:both"></div>这样做的方法

例如

<body><div class="fa">aaa<div class="son1"></div><div class="son2"></div><div style="clear:both"></div></div><div class="div2"></div>
</body>

View Code

结果如下，这种方法简单明了，但是会增加额外的标签

2、父级添加overflow:hidden|auto|scroll

在.fa 的css属性中增加overflow:hidden ，结果也如上图所示，例如

.fa {background-color: red;width: 600px;overflow: hidden;}

这种方法方便快捷，但是元素内容多时易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

3、使用after伪元素进行清除浮动

   .clearfix:after {content: ".";/* 最好给content制定一个值防止旧版浏览器有空隙 */display: block;height: 0;visibility: hidden;clear: both;}.clearfix {*zoom: 1;/* 星号代表是ie6、ie7能识别的特殊符号zoom 是ie6、ie7清除浮动的方法*/}

这样给父盒子增加一个clearfix 类即可实现1中的图片效果。

4、同时使用after和before清除浮动

        .clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}

用法和方法三一样，给父元素增加clearfix 类即可

第3、4种方法都是目前常用的方法，不增加多余标签，但是ie6和ie7不支持after，需要使用zoom：1来清除浮动

更多专业前端知识，请上【猿2048】www.mk2048.com

CSS 小结笔记之清除浮动相关推荐

触发bfc的html元素,什么是BFC？ CSS 使用伪元素清除浮动的方法
BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting co ...
CSS 小结笔记之滑动门技术
所谓的滑动门技术,就是指盒子背景能够自动拉伸以适应不同长度的文本.即当文字增多时,背景看起来也会变长. 大多数应用于导航栏之中,如微信导航栏: 具体实现方法如下: 1.首先每一块文本内容是由a标签与s ...
css .clearfix,谈谈CSS之关于clearfix清除浮动
原标题:谈谈CSS之关于clearfix清除浮动在网上要是你随便一搜"css清除浮动",就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix" ...
博学谷html css,博学谷 - CSS笔记12 - 清除浮动
1.为什么需要清除浮动由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子. 由于浮动元素不再占用原文档流的位置,所以它会对后面的元 ...
CSS高度塌陷问题-清除浮动
对于一个元素来说,如果他设置了浮动,则就会转化为块元素类型,可以设置width,height等.但是浮动会使元素脱离正常文档流,如果浮动元素的高度大于父元素的高度,则会使得浮动元素脱离父元素,也就是我 ...
CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS ...
CSS学习笔记 04、浮动与定位
文章目录前言一.浮动 1.1.1.浮动的基本概念 1.1.2.浮动的顺序贴靠特性 1.1.3.右浮动效果 1.1.4.案例:使用浮动设计网页布局(分析及源码) 1.1.5.BFC规范与浏览器差异 ...
php里清除浮动代码,CSS中使用clearfix清除浮动的方法
首先在很多很多年以前我们常用的清除浮动是这样的. CSS Code复制内容到剪贴板 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码 ...
【HTML/CSS】浮动模型和清除浮动的方法
1 浮动浮动是让元素脱离文档流,浮动前后的非定位元素会无视浮动元素,可能沿着元素另一侧垂直流动. 浮动元素会生成一个块级框,具有块级元素的特性,但是不占整行. 浮动元素脱离了文档流,无法为文档流中的 ...

CSS 小结笔记之清除浮动

CSS 小结笔记之清除浮动相关推荐

最新文章

热门文章