[Web 前端] 018 css 清除浮动的四种方法
2024-08-27 18:08:11
清除浮动的四种方法
- 加 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 前端公开课
最新文章
- 如何写出安全的API接口？接口参数加密签名设计思路
- 挖一挖C#中那些我们不常用的东西之系列（5）——FlagAttribute
- sqlite数据类型
- PHP截断函数mb_substr()详细介绍
- WebBrowser 中遍历所有的frames
- BEA-150021 - The admin server failed to authenticate the identity of the user username starting the managed server.
- hdu 4258 Covered Walkway
- ESP8266 TCP传输AT指令顺序
- 利用jquery的imgAreaSelect插件实现图片裁剪示例
- hello,world不使用ARC
- Android 2.3.5源码 更新至android 4.4，能够下载，度娘网盘
- 20165304《JAVA程序设计》第二周学习总结
- Docker学习笔记1：CentOS7 下安装Docker
- The 2nd tip of DB Query Analyzer
- [Linux]返回被阻塞的信号集
- JS将/Date(1446704778000)/转换成str
- 腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
- Ajax传递json数据简介和一个需要注意的小问题
- 利用ngnix解决跨域问题
- wpf 加阴影效果导致内容模糊的问题解决