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 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
随机推荐
- GitLab 升级迁移待办清单
GitLab 大版本升级测试用例 项目 从模板项目 URL 导入,来创建新的项目 议题 通过 Quick Actions.关联新建.直接新建 模板 关联项 标签 工时 评论 看板 里程碑 分支 通过 ...
- Linux内核之I2C协议
I2C协议标准文档 THE I2C-BUS SPECIFICATION VERSION 2.1 JANUARY 2000: https://www.csd.uoc.gr/~hy428/reading/ ...
- 批量解压上传SAP Note
最近在做印度GST相关的东西,需要手动给系统实施上百个SAP Note,十分繁琐. 标准事务代码SNOTE只支持每次上传一个Note,逐个上传大量Note会很麻烦,为此摸索出一个批量解压上传的流程,下 ...
- pde复习笔记 第一章 波动方程 第六节 能量不等式、波动方程解的唯一性和稳定性
能量不等式 这一部分需要知道的是能量的表达式 \[E(t)=\int_{0}^{l}u_{t}^{2}+a^{2}u_{x}^{2} dx \] 一般而言题目常见的问法是证明能量是减少的,也就是我们需 ...
- OpenCompass-书生浦语大模型实战营第二期第7节作业
书生浦语大模型实战营第二期第7节作业 这一节的作业和第6节作业一样没有特别多好说的,以运行结果为主. 基础作业 使用 OpenCompass 评测 internlm2-chat-1_8b 模型在 C- ...
- 基于改进MFCC特征和卷积递归神经网络的心音分类
具体的软硬件实现点击http://mcu-ai.com/MCU-AI技术网页_MCU-AI人工智能 心音分类在心血管疾病的早期发现中起着至关重要的作用,特别是对于小型初级卫生保健诊所.尽管近年来心音分 ...
- Could not find mimemagic-0.3.2 in any of the sources
rails s报如下错误 Could not find mimemagic-0.3.2 in any of the sources Run `bundle install` to install mi ...
- 02. rails安装
rails安装 ruby 1.8.6 对应的rails是2.3.2 Ruby 1.8.7 或 1.9.2 对应的rails 2.3.x ruby1.9.3,对应的rails是3.2.12, ruby2 ...
- 怎么样给Oracle数据库中的表添加列？
首发微信公众号:SQL数据库运维 原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247485212&idx=1 ...
- 在 JS 中调整 canvas 里的文字间距
实现说明: 在 JS 中 canvas 原生没有支持对文字间距的调整,我们可以通过将文字的每个字符单独渲染来实现.本案例从 CanvasRenderingContext2D 对象的原型链上扩展了一个用 ...