<!DOCTYPE html>
<html lang="en">
<head>
<!--<link rel="stylesheet" href="float.css" type="text/css">-->
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
/*使用浮动可以控制相邻元素间的排列关系。*/
/*没有设置浮动的块元素是独占一行的。*/
/*浮动是对后面元素的影响，第二个元素设置浮动对第一个元素没有影响。*/
/*如果只给第一个元素设置浮动(丢失空间位)，第二个元素不设置，后面的元素会占用第一个元素空间。两个元素都设置浮动后，会并排显示。*/
/*不希望元素受浮动元素影响时，可以清除浮动，以感知到上面元素所占的空间位。*/
/*浮动元素边界不能超过父元素的padding。*/
/*元素浮动后会变为块元素包括行元素如span，所以浮动后的元素可以设置宽高。行元素不能设置宽高*/
/*1.使用clearfix清除浮动*/
/*.clearfix {*/
/* clear: both;*/
/* height: 0;*/
/* !*显示根据浮动元素高度自动撑开父元素的新添子元素轮廓*!*/
/* border: solid 3px blue;*/
/*}*/
/*main {*/
/* border: solid 3px black;*/
/* !*height: 220px;*!*/
/* width: 620px;*/
/* margin: 0 auto;*/
/* padding: 20px;*/
/*}*/
/*div {*/
/* width: 300px;*/
/* height: 300px;*/
/* box-sizing: border-box;*/
/*}*/
/*div:nth-of-type(1) {*/
/* border: solid 3px red;*/
/* float: left;*/
/*}*/
/*div:nth-of-type(2) {*/
/* border: solid 3px green;*/
/* float: right;*/
/*}*/
/*2.清除浮动对元素的影响*/
/*div {*/
/* width: 200px;*/
/* height: 200px;*/
/*}*/
/*div.red {*/
/* border: solid 3px red;*/
/* float: left;*/
/*}*/
/*div.green {*/
/* border: solid 3px green;*/
/* float: right;*/
/*}*/
/*div.blue {*/
/* border: solid 3px blue;*/
/* background: blue;*/
/* clear: both;*/
/*}*/
/*3.通过AFTER伪元素清除浮动影响*/
/*main {*/
/* border: solid 3px black;*/
/* !*height: 220px;*!*/
/* width: 620px;*/
/* margin: 0 auto;*/
/* padding: 20px;*/
/*}*/
/*!*设置after伪类，就相当于自动追加一个空div,相比设置clearfix类的好处是不需要手动在浮动元素下添加空元素*!*/
/*main::after {*/
/* content: "";*/
/* clear: both;*/
/* display: block;*/
/* height: 0;*/
/* border: solid 3px blue;*/
/*}*/
/*div {*/
/* width: 300px;*/
/* height: 300px;*/
/* box-sizing: border-box;*/
/*}*/
/*div:nth-of-type(1) {*/
/* border: solid 3px red;*/
/* float: left;*/
/*}*/
/*div:nth-of-type(2) {*/
/* border: solid 3px green;*/
/* float: right;*/
/*}*/
/*4.OVERFLOW触发BFC清除浮动影响*/
/*main {*/
/* border: solid 3px black;*/
/* !*height: 220px;*!*/
/* width: 620px;*/
/* margin: 0 auto;*/
/* padding: 20px;*/
/* !*触发BFC，父级元素不会与浮动子元素发生叠加，父元素的高度计算会包括浮动子元素的高度。*/
/* 触发方式: overflow:hidden/scroll/auto*/
/* *!*/
/* overflow: hidden;*/
/*}*/
/*div {*/
/* width: 300px;*/
/* height: 300px;*/
/* box-sizing: border-box;*/
/*}*/
/*div:nth-of-type(1) {*/
/* border: solid 3px red;*/
/* float: left;*/
/*}*/
/*div:nth-of-type(2) {*/
/* border: solid 3px green;*/
/* float: right;*/
/*}*/
/*页面布局: 把相关性元素变成一组，布局就是结构化编组，用大组的设置减少小组设置的工作量*/
/*5.页面布局*/
/*具体css样式表查看float.less*/
/*6.环绕距离控制*/
/*p {*/
/* border: solid 2px green;*/
/* padding: 20px;*/
/* overflow: hidden;*/
/*}*/
/*p span.shape {*/
/* width: 150px;*/
/* height: 150px;*/
/* padding: 30px;*/
/* margin: 30px;*/
/* border: solid 20px red;*/
/* float: left;*/
/* !*边线环绕*!*/
/* shape-outside: border-box;*/
/* !*内容环绕*!*/
/* !*shape-outside: content-box;*!*/
/* !*内边距环绕*!*/
/* !*shape-outside: padding-box;*!*/
/* !*外边距环绕，默认*!*/
/* !*shape-outside: margin-box;*!*/
/*}*/
/*7.浮动显示区域形状定制*/
/*p {*/
/* border: solid 2px green;*/
/* padding: 20px;*/
/* overflow: hidden;*/
/*}*/
/*p span.shape {*/
/* width: 150px;*/
/* height: 150px;*/
/* padding: 30px;*/
/* margin: 30px;*/
/* background-color: red;*/
/* float: left;*/
/* !*圆形*!*/
/* !*clip-path: circle(50% at 100% 100%);*!*/
/* !*椭圆形*!*/
/* !*clip-path: ellipse(30% 50%);*!*/
/* !*多边形*!*/
/* clip-path: polygon(0 0, 100% 100%, 0 100%);*/
/* !*文字环绕*!*/
/* shape-outside: polygon(0 0, 100% 100%, 0 100%);*/
/*}*/
/*8.围绕图片的文本绕排*/
/*p {*/
/* border: solid 2px green;*/
/* padding: 20px;*/
/* overflow: hidden;*/
/*}*/
/*p img.shape {*/
/* width: 150px;*/
/* height: 150px;*/
/* !*border: solid 30px red;*!*/
/* !*padding: 30px;*!*/
/* margin: 30px;*/
/* float: left;*/
/* !*浮动显示区域形状定制*!*/
/* clip-path: circle();*/
/* !*环绕距离控制*!*/
/* shape-outside: circle();*/
/*}*/
</style>
</head>
<body>
<!--1.使用clearfix清除浮动-->
<!--<main>-->
<!-- <div></div>-->
<!-- <div></div>-->
<!--<!–父元素无法感知浮动的子元素，所以父元素无法根据浮动子元素的高度自动撑开，-->
<!--在父元素内部最后面添加一个没有高度和浮动的子元素，并使用clear:both清除浮动-->
<!--以感知上面浮动元素的空间位，所以新添子元素排在浮动元素的最后面，父元素能够感-->
<!--知到新添子元素的空间位，所以父元素就能根据浮动元素的高度自动撑开。-->
<!--–>-->
<!-- <article class="clearfix"></article>-->
<!--</main>-->
<!--2.清除浮动对元素的影响-->
<!--<div class="red"></div>-->
<!--<div class="green"></div>-->
<!--<div class="blue"></div>-->
<!--3.通过AFTER伪元素清除浮动影响-->
<!--<main>-->
<!-- <div></div>-->
<!-- <div></div>-->
<!--</main>-->
<!--4.OVERFLOW触发BFC清除浮动影响-->
<!--<main>-->
<!-- <div></div>-->
<!-- <div></div>-->
<!--</main>-->
<!--5.页面布局-->
<!--<header>-->
<!-- <nav>-->
<!-- <ul>-->
<!-- <li>-->
<!-- <a href="">系统课程</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <div class="button">登录</div>-->
<!-- </nav>-->
<!--</header>-->
<!--<main>-->
<!-- <article>文章</article>-->
<!-- <aside>侧边框</aside>-->
<!--</main>-->
<!--<footer>-->
<!-- <div>结尾</div>-->
<!--</footer>-->
<!--6.环绕距离控制-->
<!--<p>-->
<!-- <span class="shape"></span>-->
<!-- Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!-- 发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!-- 收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!-- 克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!-- aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!-- 出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!-- 的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!-- 年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</p>-->
<!--7.浮动显示区域形状定制-->
<!--<p>-->
<!-- <span class="shape"></span>-->
<!-- Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!-- 发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!-- 收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!-- 克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!-- aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!-- 出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!-- 的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!-- 年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</p>-->
<!--8.围绕图片的文本绕排-->
<!--<p>-->
<!-- <img class="shape" src="cat.jpg" alt="cat.jpg">-->
<!-- Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!-- 发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!-- 收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!-- 克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!-- aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!-- 出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!-- 的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016
