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 ...

随机推荐

js学习-apply，call，bind的实现
目录 apply call bind demo apply 简单说:构建一个和调用aplly函数一样的字符串,用eval执行,完了之后删除掉,最后返回执行的结果. Function.prototype ...
12Java进阶-IO与XML
1.File File:java.io.File:代表一个实际的文件或目录. 常用构造方法File file = new File("path"); 其它构造方法: File(St ...
windows系统下 PHP怎么安装redis扩展
在windows系统下安装redis就不赘述了,基本上就是下一步,下一步. 然后通过通过命令行启动服务. 我是在xamp 3.2.2的集成环境下进行本地redis扩展安装配置的,php的版本是5.6. ...
极致简洁的微前端框架-京东MicroApp开源了
前言 MicroApp是一款基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度.提升工作效率.它是目前市面上接入微前端成本最低的 ...
【洛谷P5008 逛庭院】tarjan缩点+贪心
既然没有题解,那么我就来提供给一份. -- 首先我们看到数据范围.妈耶!数据这么大,一开始还想用个DP来做,但是看着就不行,那么根据这个数据范围,我们大致可以猜到这道题的算法是一个贪心,那么我们怎么贪 ...
【洛谷1434 [SHOI2002]滑雪】记忆化搜索
AC代码 #include <bits/stdc++.h> using namespace std; #define ms(a,b) memset(a,b,sizeof(a)) typed ...
odoo14--odoo前端框架owl【odoo web library】
原文链接:https://www.alanhou.org/odoo-14-owl-todolist/ 1.组件树 Root / \ A B / \ ...
剖析虚幻渲染体系（08）- Shader体系
目录 8.1 本篇概述 8.2 Shader基础 8.2.1 FShader 8.2.2 Shader Parameter 8.2.3 Uniform Buffer 8.2.4 Vertex Fact ...
QT 如何在调试时能进入源码方式(MacOS)
最近在学习QT, 遇到一些crash, 也没看过QT源码啊, 就想类似Java一样, 在出错时进入源码跟踪一下, 但是QT和Java太不一样了, 死活进不去. 研究了几天, 发现本来是很简单的事情, ...
mybatis动态sql总结
前言平时在开发中,针对动态sql这块目前是薄弱点,自己根据官网在对应项目边测试边写博客,此篇只是为了加深动态sql的熟练度,有不到之处敬请批评指正! 1.if 使用动态 SQL 最常见情景是根据条件 ...