day68-CSS-float浮动，clear清除浮动，overflow溢出
1. float 浮动
1.1 在 CSS 中，任何元素都可以浮动。
1.2 浮动元素会生成一个块级框，而不论它本身是何种元素。
1.3 关于浮动的两个特点：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.4 三种取值：left向左浮动；right向右浮动；none默认值，不浮动 详情：https://www.w3school.com.cn/css/css_positioning_floating.asp 示例：
<body>
<div class="c1"></div>
<div class="c2"></div>
</body> CSS: *{margin:0px;} /*浏览器默认margin是8px，设置为0px，让背景色布满页面*/ .c1{
width:200px;
height:500px;
background-color:red;
float:left
} .c2{
width:200px;
height:500px;
background-color:green;
float:left
}
上面两元素都是向左浮动，效果是并排在一起。2. clear 清除浮动
1. clear属性规定元素的哪一侧不允许其他浮动元素。clear属性只会对自身起作用，而不会影响其他元素。
值 描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。 div{clear:left} 2. 清除浮动
2.1 浮动的副作用是父标签塌陷，所以要清除浮动。
2.2 主要有三种方式：
固定高度
伪元素清除法
overflow:hidden
2.3 伪元素清除法（使用较多）：
.clearfix:after {
content: "";
display: block;
clear: both;
}
<body>
<div id="d1">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
</body>
#d1{
border:5px red solid
}
width:50px;
height:50px;
border:1px deepskyblue solid;
background:green;
float:left; /*4个色块向左浮动*/
}
background:greenyellow;
}
<body>
<div id="d1" class="clearfix">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</div>
</body>
border:5px red solid
}
width:50px;
height:50px;
border:1px deepskyblue solid;
background:green;
float:left;
}
content:""; /*父标签后面不添加内容*/
display:block; /*布满整个页面宽度*/
clear:both; /*清除左右浮动*/
}
.c2{
background:greenyellow;
}
3. overflow溢出属性
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。 overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向 示例1：圆头头像
<body>
<div>
<img src="1.jpg" alt="">
</div>
</body> div{
width:200px;
height:100px;
border:1px red solid;
border-radius:30%; /*边框四边圆角，如果边框长宽一样，100%就是圆形*/
overflow:hidden; /*把边框外面的图片边角隐藏了，不然就挡住了边框*/
} img{
max-width:100%; /*图片最大宽度是父类标签边框的100%，不然就会溢出*/
}
示例2：滚动条
<div>
海燕
在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕就像一道闪电，高傲的飞翔
</div>
div{
width:100px;
height:100px;
border:1px red solid;
overflow:auto;
}
day68-CSS-float浮动，clear清除浮动，overflow溢出的更多相关文章
- 浮动（float）与清除浮动（clear）
上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮 ...
- CSS基础（float属性与清除浮动）
3.8 这是CSS里比较重要的属性:浮动,这个属性会在以后经常用到,算是一个重点吧 浮动 语法:float:left | right | none 特点: 浮动的元素不占位置,脱离了标准文档流 ...
- float闭合（清除浮动）和CSS HACK
一.float 闭合(清除浮动) 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. <style>.c ...
- CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
- 【CSS】clear清除浮动
clear清除浮动1.作用: 规定元素的某一侧不允许存在浮动元素 2.值: 3.应用: 清除其他浮动元素对其产生的影响 <!DOCTYPE html> <html lang=&quo ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
- 【转】CSS中的浮动和清除浮动
以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...
- [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- CSS学习摘要-浮动与清除浮动
以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
随机推荐
- Codeforces Round #611 (Div. 3)
原题面:https://codeforces.com/contest/1283 A.Minutes Before the New Year 题目大意:给定时间,问距离零点零分还有多久? 分析:注意一下 ...
- C# 关于AD域的操作 （首博）
前段时间(因为懒得找具体的时间了)公司说让系统可以进行对AD域的操作,包括创建用户.于是上网查资料,了解何为AD域.还不知道的这边请https://www.cnblogs.com/cnjavahome ...
- dango 常用 静态文件 中间件 admin管理 上传图片
静态文件 项目中的CSS.图片.js都是静态文件.一般会将静态文件放到一个单独的目录中,以方便管理.在html页面中调用时,也需要指定静态文件的路径,Django中提供了一种解析的方式配置静态文件路径 ...
- C++编程学习（十）引用
引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 注意以下几点与指针的区别: 不存在空引用.引用必须连接到一块合法的 ...
- redis主从遇到的问题
rendis安装 主从切换 Redis的HA方案 Redis高可用架构(1)—Keepalive+VIP 还是配置的问题 从一直无法连接上主 redis.conf配置 # Examples:# 1 ...
- excel提取数字
部分提取,那么就用=-LOOKUP(,-MID(A1,MIN(FIND({0;1;2;3;4;5;6;7;8;9},A1&1234567890)),ROW($1:$1024))) ------ ...
- sendgrid 批量发送邮件，收件栏只显示当前用户的方案
需求:批量发送邮件,用户可能看到其他用户的邮箱地址,之前用BBC发送,但问题是接收地址是同一个. 官方解决方案:https://sendgrid.kke.co.jp/docs/Tutorials/A_ ...
- NumPy 矩阵库函数
章节 Numpy 介绍 Numpy 安装 NumPy ndarray NumPy 数据类型 NumPy 数组创建 NumPy 基于已有数据创建数组 NumPy 基于数值区间创建数组 NumPy 数组切 ...
- IT日常技能：VMware网络配置
1.0 基本概念 集线器:把一流量为M的端口分为N个端口,每个端口流量为M/N 交换机:把一流量为M的端口分为N个端口,每个端口流量仍为M 路由器:相当于两块网卡,一块连接外网并负责NAT, 另一块负 ...
- Adobe Photoshop CC2014 for MAC 详细破解步骤
1,安装Adobe Photoshop CC2014 for MAC,可以断网安装,如果不断网的话,需要申请一个Adobe ID,是免费申请. 2,下载破解工具,https://sdifen.ctfi ...