Float浮动（慕课网学习笔记）
float浮动
| 属性:值 | 意义 |
|---|---|
| float:left | 左浮动 |
| float:right | 右浮动 |
| float:none | 不浮动 |
| float:inherit | 继承父元素浮动属性，若父元素没有浮动属性则失效 |
文字环绕图片实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字环绕图片</title>
<style>
.per{
width: 500px;
height: 500px;
border: 1px solid #683232;
}
/*img{
float: left;
}*/
img{
float: right;
}
</style>
</head>
<body>
<div class="per">
<img src="https://www.imooc.com/static/img/index/logo.png" alt="网络不给力啊">
真正的才智是刚毅的志向。 —— 拿破仑
感情有着极大的鼓舞力量，因此，它是一切道德行为的重要前提，谁要是没有强烈的志向，也就不能够热烈地把这个志向体现于事业中。 —— 凯洛夫
勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑
生活赋予我们一种巨大的和无限高贵的礼品，这就是青春：充满着力量，充满着期待志愿，充满着求知和斗争的志向，充满着希望信心和青春。 —— 奥斯特洛夫斯基
志向不过是记忆的奴隶，生气勃勃地降生，但却很难成长。 —— 莎士比亚
人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。 —— 部尔卫
当教师把每一个学生都理解为他是一个具有个人特点的、具有自己的志向、自己的智慧和性格结构的人的时候，这样的理解才能有助于教师去热爱儿童和尊重儿童。 —— 赞科夫
人的理想志向往往和他的能力成正比。 —— 约翰逊
</div>
</body>
</html>
使用float属性的元素默认会变为块状元素
一旦给元素添加了浮动属性，该元素就会脱离标准流进行排布（设置另一个兄弟元素块会产生重叠） 例如下面绿色被盖住
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>脱离标准流进行排布</title>
<style>
#pre{
width: 100px;
height: 100px;
background-color: #570000;
float: left;
}
#pro{
width: 200px;
height: 200px;
background-color: #1AFF00;
}
</style>
</head>
<body>
<div id="pre"></div>
<div id="pro"></div>
</body>
</html>
但是浮动元素依然占用文档流的文本空间，例如下面例子文字是完整的未被遮盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>脱离标准流进行排布</title>
<style>
#pre{
width: 100px;
height: 100px;
background-color: #570000;
float: left;
}
#pro{
width: 200px;
height: 200px;
background-color: #1AFF00;
}
</style>
</head>
<body>
<div id="pre"></div>
<div id="pro">真正的才智是刚毅的志向。 —— 拿破仑 感情有着极大的鼓舞力量，因此，它是一切道德行为的重要前提，谁要是没有强烈的志向，也就不能够热烈地把这个志向体现于事业中。 —— 凯洛夫 </div>
</body>
</html>
清除浮动的四种解决方法
000出现的问题 例子 父元素是空的没有高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
/*height: 32px;*/
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>
111手动给父元素添加高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: 32px;
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>
通过clear清除内部和外部浮动
| 属性:值 | 意义 |
|---|---|
| clear:none | |
| clear:left | 不允许元素左边有浮动对象 |
| clear:right | 不允许右元素边有浮动对象 |
| clear:both | 不允许有浮动对象 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: auto;
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px;
float: left;
background: red;
border: 1px solid #FFF;
}
/*清除最后一个方块的左右浮动使之不受其他浮动影响撑开父元素*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="clear"></div>
</div>
</body>
</html>
给父元素添加overflow属性并结合zoon:1使用
overflow修剪溢出的元素、、、zoom通过子元素的高度缩小放大父元素的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: auto;
border: 1px solid #000;
/*overflow修剪溢出的元素*/
overflow: hidden;
/*zoom通过子元素的高度缩小放大父元素的高度*/
zoom:1;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>
给父元素添加浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
/*父元素添加浮动自动把高度撑开，出现问题就是父元素的兄弟元素会被覆盖，，解决办法下方*/
.per{
width: 500px;
height: auto;
border: 1px solid #000;
float: left;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
/*给父元素的兄弟元素添加clear属性，清除浮动带来的影响*/
.bro{
width: 100px;
height: 100px;
background: blue;
clear: both;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="bro"></div>
</body>
</html>
实例、利用浮动属性实现CSDN官网的导航效果
自己书写很多不足多多包涵，建议是看了这么多基础了自己写一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现CSDN官网的导航效果</title>
<style>
*{
padding: 0px;
margin: 0px;
}
.headder{
background-color: #F5F5F5;
border: 1px #C3C3C3 solid;
height: 35px;
width: 1100px;
margin: auto;
text-align: center;
}
.logo{
margin-top: -12px;
height: 47px;
overflow: hidden;
float: left;
}
.mid-li{
margin: 5px;
float: left;
}
.right-logo{
background-size: 35px;
background-image: url("https://avatar.csdn.net/A/8/5/2_qq_38723677.jpg");
width: 35px;
height: 35px;
float: right;
}
.right-li{
margin: 5px;
float: right;
}
</style>
</head>
<body>
<div class="headder">
<div class="logo">
<img src="https://avatar.csdn.net/A/C/B/3_guleileo.jpg">
</div>
<div class="mid">
<div class="mid-li">博客</div>
<div class="mid-li">学院</div>
<div class="mid-li">下载</div>
<div class="mid-li">图文课</div>
<div class="mid-li">论坛</div>
<div class="mid-li">APP</div>
<div class="mid-li">问答</div>
<div class="mid-li">商城</div>
<div class="mid-li">活动</div>
<div class="mid-li">招聘</div>
</div>
<div class="right">
<div class="right-li">写博客</div>
<div class="right-logo"></div>
<div class="right-li">传资源</div>
<div class="right-logo"></div>
</div>
</div>
</body>
</html>
Float浮动（慕课网学习笔记）的更多相关文章
- JavaScript入门--慕课网学习笔记
JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...
- HTML基本语法（慕课网学习笔记）
标题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...
- JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
- CSS基本语法（慕课网学习笔记）
CSS的声明,内外联样式以及CSS的优先级 css学习.html <!DOCTYPE html> <html lang="en"> <head> ...
- CSS定位（慕课网学习笔记）
定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(默认的设置)(静态定位. ...
- 【慕课网学习笔记】Java共享变量的可见性和原子性
1. Java内存模型(Java Memory Model, JMM) Java的内存模型如下,所有变量都存储在主内存中,每个线程都有自己的工作内存. 共享变量:如果一个变量在多个线程中都使用到了,那 ...
- js之window对象（慕课网学习笔记）
javaScript定义了一个变量一个函数都会变成window中的一个成员 var a=1; alert(window.a) //会输出a的值 window基础 创建窗口.调整窗口.移动窗口.关闭窗口 ...
- js之DOM入门（慕课网学习笔记）
DOM简介 获得元素 document.getElementById('') 1.通过id获得元素内容 document.getElementsByTagName('') 2.通过标签获得元素内容 d ...
- 初识javaScript(慕课网学习笔记)
js输出 window.alert() 警告框 document.write() 写到HTML文档中 innerHTML 写到HTML元素 console.log() 写到浏览器的控制台 <!D ...
随机推荐
- Oracle执行计划总结
一.ORACLE中常见执行计划 表访问的执行计划 1.table access full:全表扫描.它会访问表中的每一条记录. 2.table access by user rowid:输入源rowi ...
- P5296 [北京省选集训2019]生成树计数
P5296 [北京省选集训2019]生成树计数 题意 求一个带权无向图所有生成树边权和的 \(k\) 次方的和. 思路 首先有一个结论:\(a^i\) 的 EGF 卷 \(b^i\) 的 EGF 等于 ...
- 浏览器WEB Browser 常识
浏览器WEB Browser 浏览器发展史 浏览器诞生与发展 浏览器的诞生 早期浏览器 Netscape Internet Explorer 与浏览器战争 chrome的崛起 时代之泪 IE浏览器终成 ...
- 2021零售商业智能(BI)的 8大好处
零售业的商业智能现在比以往任何时候都更加重要.客户数据不仅可以用来击败竞争对手,还可以用来识别模式和行为,确定哪些产品和服务适合当下销售,以及如何瞄准新市场. 什么是零售业的商业智能? 商业智能是使用 ...
- 【小工具系列】Python + OpenCV 图片序列转换成视频
图片序列转换成视频 最近一直在找一个工具,能够将一堆图片转化成视频.网上找了一些小软件,还有 win10 的照片自带的视频制作功能,都不是很满意. 又不想下载那些专业的视频剪辑软件大材小用. 然后找到 ...
- Spring Messaging 远程命令执行漏洞（CVE-2018-1270）
影响版本 Spring Framework 5.0 to 5.0.4 Spring Framework 4.3 to 4.3.14 参考 https://www.it610.com/article/1 ...
- 开源与Saas，如何选择软件？
随着云计算的发展和普及,在云上使用软件已经成为了主流,为了帮助广大用户理解,我在这里对云上软件的三种主要形态以及如何做出选择做一个简单的分析. 开源免费软件 绝大部分开源软件都是免费的,免费的出发点有 ...
- [源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现
[源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现 目录 [源码解析]机器学习参数服务器ps-lite(4) ----- 应用节点实现 0x00 摘要 0x01 基础类 1. ...
- ssrf解题记录
ssrf解题记录 最近工作需要做一些Web的代码审计,而我Web方面还比较薄弱,决定通过一些ctf的题目打打审计基础,练练思维,在博客上准备开几个专题专门记录刷题的过程. pwn题最近做的也很少,也要 ...
- C# 10 完整特性介绍
前言 开头防杠:.NET 的基础库.语言.运行时团队从来都是相互独立各自更新的,.NET 6 在基础库.运行时上同样做了非常多的改进,不过本文仅仅介绍语言部分. 距离上次介绍 C# 10 的特性已经有 ...