12-CSS浮动
01 介绍
02 浮动规则
03 案例练习
3.1 缝隙的解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<span>abc</span>
<span>123</span>
<span>ABC</span>
</div>
</body>
</html>
这种元素之间的缝隙是因为代码中的换行符被浏览器解析成了空格
使用浮动解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
float: left;
}
</style>
</head>
<body>
<div class="box">
<span>abc</span>
<span>123</span>
<span>ABC</span>
</div>
</body>
</html>
3.2 百度页码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
ul>li {
float: left;
margin-right: 5px;
}
a {
display: inline-block;
text-align: center;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 8px;
text-decoration: none;
color: #72B5EB;
background-color: #f5f5f6;
}
a.text {
width: 80px;
}
a.active,
a:hover {
background-color: #4e6ef2;
color: white;
}
</style>
</head>
<body>
<ul>
<li>
<a class="active" href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#">6</a>
</li>
<li>
<a href="#">7</a>
</li>
<li>
<a href="#">8</a>
</li>
<li>
<a href="#">9</a>
</li>
<li>
<a href="#">10</a>
</li>
<li>
<a class="text" href="#">下一页></a>
</li>
</ul>
</body>
</html>
04 关于多列布局使用浮动的方法
4.1 京东多列布局方案一(不推荐)
这种方式虽然可以解决,但是会有兼容性的问题,因为使用到了伪类
如果不考虑兼容性的情况可以使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 1190px;
margin: 0 auto;
background-color: orange;
height: 800px;
}
.item .box {
float: left;
width: 230px;
height: 322px;
background-color: red;
margin-right: 10px;
}
.item .box:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="item">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</body>
</html>
4.2 京东多列布局方案2(不推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 1190px;
height: 800px;
margin: 0 auto;
background-color: orange;
}
.item .box {
float: left;
width: 230px;
height: 322px;
margin-right: 10px;
background-color: red;
}
/* 每5个加一个last-item，但是这种方案比较麻烦 */
.item .box:nth-child(5n){
margin-right: 0;
}
</style>
</head>
<body>
<div class="item">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box last-item">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box last-item">10</div>
</div>
</body>
</html>
4.3 京东多列布局方案3(推荐)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 1190px;
margin: 0 auto;
background-color: orange;
height: 800px;
}
.item .box {
float: left;
width: 230px;
height: 322px;
background-color: red;
margin-right: 10px;
}
/* 根据公式: 父级盒子的宽度=子盒子+ margin left + margin right
这种方案就是首先要用一个盒子把元素包裹起来
*/
.item .content {
margin-right: -10px;
}
</style>
</head>
<body>
<div class="item">
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
</div>
</div>
</body>
</html>
4.4 考拉多列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background-color: #ccc;
}
.item {
width: 220px;
height: 168px;
float: left;
background-color: red;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
效果如下
有2个问题需要解决:
- 第1个是由于浮动的原因，最后一个元素跑到下面来了
- 第2个是由于设置了border，会导致元素之间有2个线的宽度
解决第2个问题,margin-left设置负值，让2条线之间重合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.content {
width: 1100px;
margin: 0 auto;
height: 800px;
background-color: #ccc;
}
.item {
width: 220px;
height: 168px;
float: left;
background-color: red;
border: 1px solid #000;
margin-left: -1px;
}
</style>
</head>
<body>
<div class="content">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
解决第一个问题
这样看上去好像合理，但是右边会有一点突出
这样设置以后，不论如何，都会有一边会突出一点，只能通过调整其中一个item少1px
05 浮动的塌陷问题
5.1 塌陷的现象
如果删除高度,那么最下面的那个盒子会上来,因为content中的元素都是浮动,脱离了标准元素,不会向父元素汇报高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 1190px;
margin: 0 auto;
background-color: orange;
/* 如果删除高度,那么最下面的那个盒子会上来,因为content中的元素都是浮动,脱离了标准元素,不会向父元素汇报高度 */
/* height: 500px; */
}
.item .box {
float: left;
width: 230px;
height: 322px;
background-color: red;
margin-right: 10px;
}
/* 根据公式: 父级盒子的宽度=子盒子+margin left + margin right
这种方案就是首先要用一个盒子把元素包裹起来
*/
.item .content {
margin-right: -10px;
}
.other {
width: 1500px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="content">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
<div class="other"></div>
</body>
</html>
5.2 解决塌陷问题推荐的方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.item {
width: 1190px;
margin: 0 auto;
background-color: orange;
}
.item .box {
float: left;
width: 230px;
height: 322px;
background-color: red;
margin-right: 10px;
}
/* 根据公式: 父级盒子的宽度=子盒子+margin left + margin right
这种方案就是首先要用一个盒子把元素包裹起来
*/
.item .content {
margin-right: -10px;
}
.clear-fix::after {
content: "";
clear: both;
display: block;
/* 加上浏览器的兼容性 */
visibility: hidden;
height: 0;
}
.clear-fix {
/* 兼容IE6/IE7 */
*zoom: 1;
}
.other {
width: 1500px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="content clear-fix">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>
</div>
<div class="other"></div>
</body>
</html>
5.3 解决塌陷问题的本质
12-CSS浮动的更多相关文章
- day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作
接day26CSS=>CSS定位 overflow属性 值 描述 示例 visible 默认值,内容不会被修剪,会呈现在元素框之外 hidden 内容会被修剪,并且其余内容是不可见的 overf ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- CSS浮动讲解好文章推荐
经验分享:CSS浮动(float,clear)通俗讲解 http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 好文推荐!
- css浮动布局
上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页 ...
- CSS浮动专题!
在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...
- css浮动与清除浮动
css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- Css - 浮动布局
Css - 浮动布局 浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一 ...
- CSS 浮动和清除
CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
随机推荐
- NASM中的ALIGN ALIGNB SECTALIGN
ALIGN与ALIGNB NASM中的ALIGN与ALIGNB是用来字节对齐的,它们接收2个参数,第一个参数是必须的,表示对齐的字节数(必须是2的幂),第二个参数是可选的,表示为了对齐而进行填充的内容 ...
- DNS(7) -- 智能DNS实现
目录 1. 智能DNS 1.1 智能DNS概述 1.2 ACL控制列表 1.3 智能DNS实现 1.3.1 bind-view功能 1.3.2 智能DNS场景实现 1.3.3 生产场景配置示例 1. ...
- cesium教程4-用entity加载glb和gltf格式的小模型
示例完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- addEventListener添加事件监听
removeEventListener移除事件监听 window.addEventListener('mousedown', e => this.closeMenu(e)) window.add ...
- toLua中Lua调用C#中的类
toLua中Lua调用C#: [7]Lua脚本调用C#中的class 准备工作:打算在Lua脚本中使用Debug,使用lua调用C#脚本,需要绑定LuaState和自定义添加Debug --- --- ...
- Python：conda install 和pip install的区别
pip是个安装包的软件,conda是个环境管理的工具.conda能够安装多个python解释器,pip不行.因此conda在实际开发中是主要用来隔离不同的python版本和Tensorflow& ...
- Ceph存储池管理
目录 Ceph存储池 1. Ceph的存储流程 1. 数据写入 2. 数据读取 2. 资源池的配置 2.1 资源池创建 pgp是什么 (Placement Group for Placement pu ...
- android studio 安装与配置
android studio 下载地址:http://www.android-studio.org/ 找一个存储空间,我在D盘上,建好如下目录 : 找到刚才在载的文件 android-stu ...
- JS / jQuery 刷新页面的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Json.Net Deserialize a Collection from BSON
Deserialize a Collection from BSON (newtonsoft.com) This sample sets ReadRootValueAsArray to true so ...