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 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...
随机推荐
- Mac安装mysql5.7
1.下载文件(访问就直接下载了) http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.10-osx10.10-x86_64.dmg 2.打开下 ...
- Soluton Set - ZJOI历年真题
upd:不考浙江省选了.这个题解贴应该不会再更新了. upd:进省队了.再做点,再写点. ZJOI2022 Day1T1 Link&Submission. tag:组合计数,容斥 假设固定了第 ...
- 钉消息Markdown语法
支持的Markdown语法 1 标题 2 # 一级标题 3 ## 二级标题 4 ### 三级标题 5 #### 四级标题 6 ##### 五级标题 7 ###### 六级标题 8 9 引用 10 &g ...
- 一、Doris演进史
Apache Doris -- 为分析而生 Doris发展历程: Doris发展比较重要的关键节点与事件 #2008 - Doris1 :「筑巢引凤」的重要基石 早年,百度最主要的收入来源是广告.广告 ...
- 大营销抽奖系统，DDD开发要如何建模？
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 大家好,我是技术UP主小傅哥. 经过5.1假期的一顿框框输出,终于完成了<大营销项目 ...
- 数据库中存储bool对象的数据，使用Bit和Integer有什么区别，性能上有多大的差异
在数据库中存储布尔(Boolean)值时,常见的两种选择是使用 BIT 类型或 INTEGER 类型.两者在存储.性能和使用上的区别如下: 1. BIT 类型 存储:BIT 类型专门用于存储布尔值.通 ...
- LLM实战：LLM微调加速神器-Unsloth + Qwen1.5
1. 背景 上一篇介绍了基于训练加速框架Unsloth,微调训练Llama3的显卡资源占用及训练时间对比. 近期Unsloth新增了Qwen1.5的模型适配,因此本qiang~马不停蹄地又进行了一次实 ...
- 训练营 |【AIRIOT大学计划暑期训练营】第三期即将开营，报名从速！
培养新生力量,聚焦产业融合.为了促进物联网产业的纵深发展和创新,推进教育链.产业链与创新链的有机衔接,提高学生理论.实践和创新能力,为行业培养更多优秀人才,航天科技控股集团股份有限公司将于2023年7 ...
- kubernets之pod的生命周期容器启动后钩子以及容器结束前钩子
一 先来介绍容器启动后钩子 1.1 容器启动后钩子,并不是容器启动之后才会执行的操作,而是在容器启动过程中,异步的和容器进行启动的一种钩子它有2种表现形式,包括我们后面提到的容器结束前钩子一样 在一 ...
- centos7源码编译安装nginx1.19并调优，向已安装的nginx添加新模块
目录 一.关于nginx 二.nginx的安装方式 三.源码编译安装nginx 3.1 下载nginx源码并解压 3.2 创建nginx用户和组 3.3 安装nginx编译环境(解决依赖问题) 3.4 ...