[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</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
</body>
</html>
div{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
/* 清除浮动
left: 清除左浮动
right: 清除有浮动
both: 清除左右两边的浮动 */
/*clear: left; 只加上这句，效果见效果截图 2*/
/*clear: rightt; 只加上这句，显示上没有变化 */
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}
- 效果截图 1
- 缩小浏览器的宽度后的截图
- 效果截图 2
例 2
<!-- 例2 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
</div>
</body>
</html>
<!-- 例2.1 -->
.wrap{
border: 2px solid;
/* 清除浮动
解决父级元素高度无法撑开问题
注意: 是给浮动元素的父级添加 */
/*overflow: hidden; 加上这句，见效果截图 4 */
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
clear: left;
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}
- 效果截图 3
- 效果截图 4
<!-- 例2.2 html 不变 -->
.wrap{
border: 2px solid;
}
.wrap:after{ /* 伪类选择器 */
/* 也有 before，但一般使用 after
这种方法的思路：
1. 在父级元素后插入一个空的字符串
2. 将这个字符串转成块级元素
3. 用 clear: both 给此元素清除浮动
4. 没有添加不必要的标签，不影响页面结构
注意：给浮动元素的父级添加 */
content: '';
display: table;
/* display: block; 从效果上看，block 与 table 一致 */
clear: both;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
clear: left;
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}
- 效果截图 5
- 与效果截图 4 一般无二，故略
例 3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="wrap">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="cl"></div> <!-- 多了这句 -->
</div>
</body>
</html>
.wrap{
border: 2px solid;
}
.cl{ /* 可行，但不推荐，因为会对页面结构产生影响 */
clear: both;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7{
width: 100px;
height: 100px;
float: left;
}
.box1{
background: red;
}
.box2{
background: orange;
}
.box3{
background: yellow;
}
.box4{
background: green;
clear: left;
}
.box5{
background: blue;
}
.box6{
background: indigo;
}
.box7{
background: purple;
}
- 效果截图 6
- 与效果截图 4 一般无二，故略
补充
- 有时会加一句
zoom:1;，这样做是为了兼容 IE
参考：北京图灵学院的 Web 前端公开课
[Web 前端] 018 css 清除浮动的四种方法的更多相关文章
- CSS 清除浮动的四种方法
在实际项目中,我们经常会用到float属性来对页面进行布局.当使用float时,意味着该元素已经脱离了文档流,相当于浮于文档之上,不占据空间.但是针对兄弟元素为文字内容时,会占据一定空间,从而产生文字 ...
- 活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- CSS 清除浮动的4种方法
此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...
- css清除浮动的几种方法整理
四种清除浮动方法如下: 1.使用空标签清除浮动.空标签可以是div标签,也可以是P 标签.这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:cle ...
- css清除浮动的8种方法以及优缺点
浮动会使当前标签产生上浮的效果,同时会影响到前后的标签.父级标签的位置及width height 属性.而且同样的代码,在各种浏览器中效果可能不同,这样让清除浮动更难了.清除浮动引起的问题有很多的方法 ...
- div 清除浮动的四种方法
概述:为了解决父级元素因为子级内部高度为0的问题 (很多情况 不方便给父级元素高,因为不知道有多少内容,让里面的盒子自动撑起高度),清除浮动本质叫闭合浮动更好一些,清除浮动就是把浮动的盒子关到里面,让 ...
- CSS 清除浮动的几种方法
导读: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列,Float(浮动),往往是用于图像,使得文字围绕图片的效果,而它在布局时一样非常有用.不过有利也有弊,使用浮动 ...
- css清除浮动的几种方法
推荐几种好用的清除浮动方法: 方法1: .clearfix:after { content:"."; display:block; height:; clear:both; vis ...
- CSS读书笔记（3）---清除浮动的几种方法
浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en" ...
随机推荐
- NOIP2019(CSP2019) 游记
NOIP2019(CSP2019) 游记 近一年的似乎也就是感觉比别的学校的同学水平低的不止一点,到现在也没有搞清楚大概应该怎么科学有效的练习,并不会思考"为什么想不到"和&quo ...
- MongoDB之$关键字，以及$修饰器$set,$inc,$push,$pull,$pop
一.查询中常见的 等于 大于 小于 大于等于 小于等于 等于:在MongoDB中,什么字段等于什么值就是" : ",比如 "name":"路飞学城&q ...
- [洛谷P3243] 菜肴制作
问题描述 知名美食家小 A被邀请至ATM 大酒店,为其品评菜肴. ATM 酒店为小 A 准备了 N 道菜肴,酒店按照为菜肴预估的质量从高到低给予1到N的顺序编号,预估质量最高的菜肴编号为1. 由于菜肴 ...
- 13 Spring Boot Shiro使用JS-CSS-IMG
filterChainMap.put("/403", "anon");filterChainMap.put("/assets/**", &q ...
- HDU - 6578 Blank DP + 滚动数组
HDU - 6578 Blank 题意 给你\(\{0,1,2, 3\}\)四个数,分别填入长度为\(n\)的数列中,有\(m\)个限制条件,\(l_{i}, r_{i}, x_{i}\)表示在\([ ...
- 【BZOJ2460】元素（拟阵）
题意:给定n个物品,每个物品有属性x和价值y,要求从中选出一些使得价值和最大并且其中没有属性xor和为0的非空子集 n<=1000,x<=1e18,y<=1e4 思路:没有xor和为 ...
- Web引用中文个性字体
最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率.经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式 ...
- 尚硅谷Docker---1-5、docker简介
尚硅谷Docker---1-5.docker简介 一.总结 一句话总结: docker是环境打包:有点像windows镜像 docker的实质:缩小版.精细版.高度浓缩版的一个小型的linux系统 1 ...
- chrome flash 自动暂停问题
chrome flash 尺寸小于398*298时,只要宽和高某一个值小于对应值就会自动暂停,出现这个圆形的播放按钮.(估计是当广告处理了...) 将尺寸调大即可.
- SDK使用NinePatch(.9)资源
.9资源是啥? .9图是一种可以拉伸的图片格式,当你把它用作背景图时,android系统会根据实际情况来拉伸图片资源.比如按钮的背景必须根据上面显示文字的长短作拉伸.NinePatch就是额外包含了一 ...