浮动

@Float

文档流 Workflow

.渲染页面时，按照 html 元素的特性，从左到右、从上到下依次排列，形成文档流 - 常规流

.如果是 inline，则不换行排列；直到当前行放不下，再另起新行排列

.如果是 block，则独占1行，即使有多余的空间也不给其它元素使用

脱离文档流

.CSS 某些属性会导致 html 元素脱离文档流，如浮动、定位等，不再参与文档流的排列，即：位置丢失

.脱离了文档流的元素漂在页面中，由特有的 CSS 属性确定其最终的位置

浮动 MDN - Float

float: left | right | both;

.浮动元素会脱离文档流，漂浮到容器的左侧或者右侧，原先位置丢失；位置丢失会怎样？后面元素会补上来

.横向无缝排列：left：先靠上再靠左；right：先靠上再靠右 - 先漂起来再靠边

.利用这个特性可以实现布局，特别是自适应布局；现在逐渐被弹性盒子 flex 或网格 grid 代替

特点 Features

.元素浮动后，如果是非 block 元素，将自动变为块元素 block

.元素在文档中出现的顺序不一样，最后渲染的结果也不一样

.消除 inline 元素的缝隙，如图片的空白

.使得 block 元素不再独占一行

.float 布局时，若有一个元素浮动，则所有元素都应该浮动

.更多信息，请查看 MDN - floats、float、float何去何从

清除浮动 Clear

.元素浮动后，会脱离正常的文档流

.如果不给父级指定高度，那么父级高度就变成了0/位置丢失[高度坍塌]；父级后面的元素就会补上来，造成布局混乱。而且大多数情况下，父级的高度一开始并不能确定，通常由子元素撑满；所以必须要清除浮动带来的影响

.只有 block 元素可以清除浮动

.清除的方法很多。如：父元素指定高度、溢出隐藏、弹性布局(自己或父级)。。。

.为了不增加额外的标签，通常由父元素的伪元素 ::after 负责

.请不要考虑IE的兼容性了。否则打你！！！

.clear::after {
    content: '';
    display: block;
    clear: both;
}

[] 首字下沉、图文混排、海经 - 个人信息

.首字 ::first-letter 下沉/浮动

.图片左右浮动

.使用 MDN - shape-outside 和 clip-path 优化边缘轮廓

中国人民解放军陆军特种作战学院是一所特种作战、情报侦察领域的高等教育院校，是全军侦察特战人才培养基地、全军高中级狙击手培训中心、全军军事体育人才培训中心、特种作战理论和战法训法研创中心。学院溯源于解放战争初期创建的冀热辽军政干部学校、解放战争末期创建的第二野战军军政大学第三分校和1978年开办的国际关系学院侦察与特种作战指挥专业，2017年7月，原特种作战学院和桂林综合训练基地合并组建成为陆军特种作战学院。截至2021年5月，学院横跨广西、广东和湖南，在桂林、广州、衡阳、株洲共设8个营区，有11个本科专业；有2个专业学位硕士授权点，2个重点学科建设方向；有教员500余人，其中高职教员143人，具有研究生以上学历的256人。

学院院徽全部要素包含3个模块、9个部分：通用元素和基本属性：五角红星与八一字样，是中国人民解放军军徽核心，代表性质和方向；长城，寓意守护国土安全的基本功能；陆军特种作战学院，是最基本的文字标识。特色元素和专业属性：红色闪电，寓意特战官兵“铁血忠诚”、“一招制胜”的信仰底色和职能使命；三支羽翼组成的翅膀，既指海陆空三栖作战的基本样式，也呈现学院转型重塑、换羽腾飞之势；双色利刃，紧扣《孙子兵法》中“以正合，以奇胜”的特种作战战术起源。辅助元素和精神属性：虚拟的网络地球，强调特战人才要立足国际视野、抢占科技前沿；两条折线，勾勒出狼眼睛的轮廓，使院徽整体神似战狼，彰显特战尖兵的战斗精神；书本底座，寓意学院人才培养托起特战力量发展的支撑作用。

[] 导航 - float

.LOGO左浮动；其它导航项右浮动

.结构不同，浮动的效果也不同 - 需要注意哪个在前面哪个在后面

.利用左右 border 的色差创建立体边框

.字体大小引发的垂直方向对齐可以使用统一的行高 line-height 解决。否则要仔细的计算元素的外边距 margin

[] 时间轴；更多实现，请访问时间轴 - timeline 学习路线 - agenda

.利用元素卡位实现 - 宽度为容器的50%多一点点

.使用 flex 的direction 或 order 属性，实现起来更加快速方便

布局 Layout

内容自适应

[] 内容自适应1

.内容大多固定，容器大，多展示几个；容器小，少展示几个

.不太容易精确控制元素之间的位置，如等分

.适合不同尺寸的终端，请在浏览器检查模式下查看

.float-cont0>div {
    float: left;
    width: 150px;
    height: 30px;
    margin: 4px;
    background-color: #f40;
}

[] 内容自适应2

.内容大小采用%，随容器变化

.内容彼此之间的关系相对比较规范

.float-cont1>div {
    float: left;
    width: 18%;
    height: 30px;
    margin: 1%;
    background-color: #f40;
}

两栏布局

[] 左侧固定

.浮动元素先行

固定宽度

自动宽度

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus molestiae esse voluptas nihil sunt, ab amet officia officiis assumenda, excepturi nostrum repudiandae maxime, eius ea. Eos, tenetur in. Quos, quibusdam obcaecati. Eligendi repellendus, perferendis doloribus ea officia ullam accusantium facere inventore velit amet. Impedit quia quibusdam distinctio est tempora, neque explicabo provident debitis, quaerat unde accusantium. Rerum aspernatur, consequatur, eos autem ullam quod voluptas consectetur magnam asperiores quia tenetur libero corrupti amet adipisci minima eaque ex. Sunt odit veniam fugit corrupti qui aut atque. Eveniet vel sunt modi aspernatur exercitationem illum obcaecati fugit! Quidem saepe ab deserunt minus, commodi in!

<div>
    <div class="float-l"></div>
    <div class="float-main"></div>
</div>

.float-l {
    float: left;
}
.float-main {
  overflow: hidden;
}

[] 右侧固定 - 两栏布局

.浮动元素先行

固定宽度

自动宽度

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam, placeat asperiores fugiat vero mollitia nostrum libero officia maiores itaque quo unde maxime magni dignissimos necessitatibus quos facere officiis ipsam accusantium quae dolorum exercitationem fugit. Ipsum iste atque culpa quis maiores molestiae consequatur. Debitis consequatur eius autem ad. Voluptas laudantium consectetur et, eum doloribus minima facilis? Est magnam, labore earum natus ipsam modi harum accusantium expedita at cupiditate incidunt impedit nihil dolor? Porro, cupiditate neque quaerat amet sed et saepe suscipit quibusdam omnis maiores ipsum aliquam quod dolor architecto quos tempore nesciunt in error fugiat molestias! Deserunt suscipit id sed optio!

<div>
    <div class="float-r"></div>
    <div class="float-main"></div>
</div>

.float-r {
    float: right;
}
.float-main {
  overflow: hidden;
}

圣杯布局/双飞燕

.两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染

.圣杯布局是在父元素上设置了padding-left和padding-right，再通过定位把左右放在俩端[给中间元素设置 padding 更简洁]

.淘宝提出双飞燕；优化了圣杯布局：在中间这个 div 的外层又套了一个 div 来放置内容，在给这个中间的 div 设置 margin-left和margin-right

.主要是对中间元素的处理不同

[] 优先优先渲染

自动宽度

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum, accusantium itaque! Fuga architecto perferendis excepturi obcaecati dolorem soluta! Mollitia perspiciatis, necessitatibus animi, autem sit magnam quia, recusandae consequuntur obcaecati similique modi. Facilis nulla minima, harum praesentium minus asperiores assumenda cum consequuntur adipisci aspernatur odit voluptates nisi. Eum, iure quae! Iusto illum inventore natus impedit dolore dignissimos harum quia consequuntur autem eius est cupiditate fugiat, molestias mollitia dolorum recusandae blanditiis fuga et veniam voluptatibus, repellendus laboriosam voluptatum? Placeat laudantium provident eum, hic quas nisi assumenda minus. Numquam nisi accusamus ex pariatur? Ducimus, doloremque? Quod esse quam illo. Rem sit impedit eius?

固定宽度

<div class="cup">
  <div class="cup-main">自动宽度</div>
  <div class="cup-left">固定宽度</div>
  <div class="cup-right">固定宽度</div>
</div>

.cup-main {
  float: left;//MUST
  width: 100%;//MUST
  padding: 0 100px;//NOT margin
  height: 100px;
  background-color: #f40;
}

.cup-left {
  float: left;//MUST
  width: 100px;
  margin-left: -100%;//MUST
  height: 100px;
  background-color: #ddd;
}

.cup-right {
  float: left;//OR right
  width: 100px;
  margin-left: -100px;//MUST
  height: 100px;
  background-color: #ccc;
}

[] 不考虑优先渲染

固定宽度

自动宽度

<div>
    <div class="float-l"></div>
    <div class="float-r"></div>
    <div class="float-main"></div>
</div>

.float-l {
    float: left;
}
.float-r {
    float: right;
}

说明

.以上布局，都使用溢出隐藏构造 BFC，更便捷

.让中间和两侧隔开一定距离：不能给中间使用 margin。因为两个浮动脱离了文档流，中间的 margin 顶不开他们

.左侧使用 margin-right，右侧使用 margin-left，中间部分正常溢出隐藏，使得各部分之间保留一定的间隙

.因为中间是为了躲开两侧的浮动元素，给浮动元素指定 margin 就可以影响到中间

固定宽度

自动宽度

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores hic dolores nihil! Quam tenetur consectetur voluptatum, delectus vero mollitia beatae, nihil vitae optio sit reiciendis, facere ipsam voluptas minus perferendis ullam repellendus impedit fugit id dignissimos accusantium natus omnis reprehenderit dolores! Accusamus nobis consequuntur distinctio pariatur sit et aperiam praesentium modi dolor ipsum suscipit unde corporis ut vero excepturi fuga tenetur dolores quisquam qui odit aut, omnis inventore possimus! Ea, nobis repellat iure aliquam totam assumenda blanditiis? Quasi id ducimus reprehenderit odio architecto corrupti aliquid! Eligendi nam fugit laudantium odit maxime magni consectetur quisquam harum? A eos commodi quisquam optio.

.float-main {
    overflow: hidden;
}

BFC

. Block Format Context

.构建|开启 BFC

.单独开启一块区域，内部的渲染规则不会影响外部

.可以消除元素内部的问题

.根元素 html 就是一个BFC

子元素不会产生 margin 塌陷，即不会和子元素产生 margin 合并

子元素浮动，自身高度不会坍塌

不会被其他浮动元素覆盖，会避开浮动元素

不能解决元素外部的问题

设置为 float

设置为定位为绝对 absolute 或相对 relative

设置 overflow，如 auto、hidden，只要不要是 visible 就可以

变成行块元素 display 为 inline-block

变成 flex 项目，即其父级使用 flex

变成表格元素 display为table 元素，如 table、table-cell 等

添加 border

添加 padding

总结与作业 Summary & Homework

总结: .浮动的特性和主要使用
作业: .利用浮动优化个人网站