css_10 | CSS——让“盒子”动起来：① 浮动

时间  2019-11-06
标签 css 盒子 起来 浮动 栏目 CSS 繁體版
原文   原文链接 
本文推荐 PC 端阅读~

本文版权归 “公众号 | 前端一万小时” 全部，未经受权，请勿转载！
复制代码

获取编号.png 

css_10
复制代码

涉及面试题.png 

1. 浮动元素有什么特征？对父容器、其余浮动元素、普通元素、文字分别有什么影响？
2. 清除浮动指什么？如何清除浮动？两种以上方法。
复制代码

前言： 前 10 篇文章，咱们基本上都是在用“理论”学习“理论”，那从这篇开始，咱们试着用“实践”来学习理论，而后又用于实践。
一个原则：把代码拷贝到 JS Bin 上，对照效果搞懂每行代码的“是什么”、“为何”、“怎么样”？css


1 为何须要“浮动”？

假设咱们须要有个东西，而后它的排版不是依照盒模型的定义——从上往下依次排列，而是从左到右这种结构，那么咱们须要考虑到使用“浮动”。html

例如一个网站的头部，一部分在左边，一部分在右边。首先，“部分”的表示咱们会用 div ，而 div 是块级元素，按理说它会从上到下，占据一整行，不可能整列排列。那这个时候咱们就须要“浮动”。前端


2 “浮动”是怎么用的，有什么表现效果？

2.1 放不下会换行

一个“浮动盒”会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另外一个浮动盒的外边。若是没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了。面试

🔗源码及效果展现
htmlapi

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
复制代码

css浏览器

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
  float: left;
/*🚀直接在你须要浮动的元素上加 float 属性。*/

}
.box1{
  background: blue;
}
.box2{
  background: pink;
}
复制代码

10-01.png

🆚对比：
🔗源码及效果展现
cssbash

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
  float: right;
}
/*🚀站在浏览器的角度看，它会挨着顺序依次渲染*/

.box1{
  background: blue;
}
.box2{
  background: pink;
}
复制代码

10-02.png

2.2 被卡住的状况

🔗源码及效果展现
htmlide

<body>
<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
</body>
复制代码

css布局

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1{
  background: blue;
  height: 120px;
}
.box2{
  background: pink;
}

/*依然站在浏览器的角度，从上往下渲染文档， 当依次渲染完 一、2 后，渲染 3 的时候，右边放不下， 而后它要被挤下去，挤下去后它贴着 2 的下边缘开始向左移动， 当移动碰到 1 右下角时，动不了了，1 被卡住了。 因此咱们在设置高度不同时，会出现一个“卡住”的问题。*/
复制代码

10-03.png

2.3 当浮动元素与文本有交集的时候

🔗源码及效果展现
html学习

<body>
<div class="ct">
  <div class="box box1">1</div>
  <p>挨到包含块边沿或者另外一个浮动盒的外边。
若是存在行盒，浮动盒的外 top （边）会与当前行盒的 top （边）对齐。
若是没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其余浮动了。
  </p>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>
</body>
复制代码

css

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1 {
  background: blue;
  width: 140px;
  height: 120px;
}
.box2 {
  background: pink;
}
复制代码

10-04.png

🏆能够获得：
普通流中的一个元素，若是没有设置定位和浮动，那它和浮动元素在一块儿以后，它会被浮动元素所遮挡。

💡进一步验证：
🔗源码及效果展现
css

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}
.box1 {
  background: blue;
  height: 120px;
  width: 140px;
  opacity: 0.2;  /*🚀设置透明度来观察*/
}
.box2 {
  background: pink;
}

/*🚀但里边的文字并无被这个浮动元素所遮挡，那他呈现的这个效果是： 这个段落 p 是看不到这个浮动元素的，而文字看获得，而且围绕这个浮动元素排列。 */
/*🚀即展示出来的一个规则就是： 当一个普通元素碰到一个浮动元素后，这个普通元素看不见这个浮动元素， 但普通元素里边的文字看得见这个浮动元素。 */
复制代码

10-05.png

2.4 浮动元素脱离了普通流

脱离普通流是指：他的父容器在去计算宽高的时候，发现不了浮动元素。即，父容器不会被里面的浮动元素撑开；

⚠️注意：和 absolute 不同。

🔗源码及效果展现
html

<div class="ct">
  <div class="box box1">1</div>
  <div class="box box2">2块盒看不见浮动的 box1，但我是文本我能看见</div>
  <div class="box box3">3</div>
</div>
复制代码

css

.ct {
  width: 280px;
  height: 300px;
  border: 1px solid;
  margin: 100px;
}
.box {
  color: #fff;
  width: 100px;
  height: 100px;
  background: red;
}
.box1 {
  background: blue;
  float: left;
  opacity: 0.6;
}
.box2 {
  background: pink;
  height: 110px;
  width: 110px;    
}
复制代码

10-06.png

2.5 块级元素浮动宽度收缩，行内元素浮动以块级特性去呈现

🔗源码及效果展现
html

<body>
<div class="box">这是div</div>
<span>这是span</span>
</body>
复制代码

css

.box {
  color: #fff;
  float: left;
  background: red;
}
span {
  color: #fff;
  float: left;
  background: blue;
  width: 100px;
  height: 50px;
  margin: 10px;
} 

/*🚀块级元素设置浮动以后，它就呈现出 inline-block 这种感受，他的宽度会收缩。*/
/*🚀行内元素设置为浮动以后，它就呈现了块级的特性， 也有 inline-block 的感受，就把行内元素变成能够设置宽高、margin 等， 但没有居中这些东西。 */
复制代码

10-07.png


3 “浮动”的使用场景

3.1 两栏布局（左侧固定宽度，右侧自适应； 右侧固定宽度，左侧自适应）

🔗源码及效果展现——左侧固定宽度，右侧自适应
html

<div class="aside">侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
复制代码

css

.aside {
  color: #fff;
  width: 150px;
  height: 400px;
  background: red;
  float: left;
}
.main {
  color: #fff;
  margin-left: 160px;
/*🚀表示左边的这 160px 的范围我不用了*/

  background: blue;
  height: 500px;
}
复制代码

10-08.png

🆚对比（右侧固定宽度，左侧自适应）：
🔗源码及效果展现
html

<div class="aside">侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
复制代码

css

.aside {
  color: #fff;
  width: 150px;
  height: 400px;
  background: red;
  float: right;
}
.main {
  color: #fff;
  margin-right: 160px;
/*🚀表示右边的这 160px 的范围我不用了*/

  background: blue;
  height: 500px;
}
复制代码

10-09.png

3.2 三栏布局——两侧宽度固定，中间自适应（注意 HTML 中的 menu aside main 的顺序!）

🔗源码及效果展现
html

<div class="menu">侧边栏固定宽度</div>
<div class="aside">侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
复制代码

css

.menu {
  color: #fff;
  width: 150px;
  height: 400px;
  background: red;

  float: left;
}
.aside { 
  color: #fff;
  width: 150px;
  height: 400px;
  background: red;

  float: right;
}
.main {
  color: #fff;
  margin-right: 160px;
  margin-left: 160px;
/*🚀加左右 margin 就把位置撑开了*/

  background: blue;
  height: 500px;
}
复制代码

10-10-01.png

⚠️若是 HTML 中的 menu aside main 的顺序变了：
🔗源码及效果展现
html

<div class="menu">侧边栏固定宽度</div>
<div class="main">内容区块自适应宽度</div>
<div class="aside">侧边栏固定宽度</div>

<!--顺序一旦变了，后边的 aside 就会跳行，跑到下边去了。 缘由：假设我是浏览器，我须要对着 html 来画出对应的图像， 首先画 menu ,结合其样式，左浮； 但这里咱们遇到了 main ，这个 main 是一个块级元素，它会占据一整行的宽度； 那接下来的 aside 就只有在 main 的基础上往右下流动。-->
复制代码

css

.menu {
  color: #fff;
  width: 150px;
  height: 400px;
  background: red;
  float: left;
}
.aside { 
  color: #fff;
  width: 150px;
  height: 400px;
  background: red;
  float: right;
}

.main {
  color: #fff;
  margin-right: 160px;
  margin-left: 160px;
/*加左右 margin 就把位置撑开了*/

  background: blue;
  height: 500px;
}
复制代码

10-10-02.png

3.3 利用浮动实现“导航条”

3.3.1 “导航条”靠左

🔗源码及效果展现
html

<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
复制代码

css

.navbar {
  list-style: none;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

/*🚀固然咱们用 inline-block 也能够实现效果， 但不一样方式须要注意的问题不同： 使用浮动咱们须要注意撑开容器；而用 inline-block 咱们须要注意它的缝隙。 */
复制代码

10-12.png

3.3.2 “导航条”靠右

🔗源码及效果展现
html

<body>
<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
</body>
复制代码

css

.navbar {
  float: right;
/*🚀把 ul 总体进行右浮动*/

  list-style: none;
}
.navbar>li {
  float: left;
/*🚀但 ul 里边的东西都是靠左的*/

  margin-left: 15px;
}
复制代码

10-13.png

🆚对比：
🔗源码及效果展现
html

<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
复制代码

css

.navbar {
  list-style: none;
}
.navbar>li {
  float: right;
/*🚀直接改这里是不行的，由于站在浏览器的立场是按文档顺序来渲染的*/

  margin-left: 15px;
}
复制代码

10-14.png


4 清除“浮动”

4.1 为何要清除浮动？

由于任何东西有利有弊。

4.1.1 第一，浮动对后续元素位置产生影响（渲染时，由于块元素看不见，但里边的文字看的见）

🔗源码及效果展现
html

<div id="content">
  <div class="menu">侧边栏固定宽度</div>
  <div class="aside">侧边栏固定宽度</div>
  <div class="main">内容区块自适应宽度</div>
</div>
<div id="footer">我是 footer,但个人样式出现了问题</div>
复制代码

css

.menu {
  color: #fff;
  width: 150px;
  height: 300px;
  background: red;
  float: left;
}
.aside { 
  color: #fff;
  width: 150px;
  height: 300px;
  background: red;
  float: right;
}
.main {
  color: #fff;
  margin-right: 160px;
  margin-left: 160px;
  background: blue;
  height: 200px;
}
#footer {
  color: #fff;
  background: grey;
}
复制代码

10-15.png

10-16.png

4.1.2 第二，父容器高度计算出现问题

🔗源码及效果展现
html

<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
复制代码

css

.navbar {
  list-style: none;
  border: 1px solid #ccc;
  /*加一个背景色也没效果：   background: pink;*/

}
.navbar>li {
  float: left;
  margin-left: 15px;
}


/*🚀因为浮动元素脱离了文档流，因此他的父元素是看不见他的。 这里对于 navbar 来讲，他认为里边没有什么 li 来把它撑开, 由于 li 已经浮动了，那没有东西撑开它，它就会认为高度为 0。*/
复制代码

10-17.png

4.2 清除浮动的方法

4.2.1 清除浮动实现的原理和方法

🔗源码及效果展现
html

<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>

  <li class="clear"></li>
<!-- 🚀想解决这个没办法撑开的问题， 那么就要求这个源文档中要有一个没有被浮动的的元素——普通元素。--> 

</ul>
复制代码

css

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.navbar .clear {
  float: none;
  clear: left;
}
/*🚀经过清除浮动来得到一个普通元素，进而撑开这个父容器*/
复制代码

10-18.png

  • 清除浮动 clear: left; ——这个 clear 能够用在任何元素上，无论你是否是浮动元素。要求该盒的 top 、border 边位于源文档（就是 html 文档结构中）中在此以前的元素造成的全部左浮动盒的 bottom 外边下方（若是没有左浮动盒，那你清除左浮动也就没有意义）。
  • 清除浮动 clear: right; ——要求该盒的 top border 边位于源文档中在此以前的元素造成的全部右浮动盒的 bottom 外边下方。
  • 清除浮动 clear: both; ——只要源文档中该盒前边有浮动元素，那么就在这个浮动元素下方。

1. 🆚对比

咱们上边是用一个造了一个 li 来实体化普通元素，那咱们能否有更简化的方法——伪元素（伪元素的一个做用就是去代替标签）。
🔗源码及效果展现
html

<ul class="navbar">
  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
复制代码

css

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.navbar::after {
  content: '';
/*🚀写了一个元素，你必需要有 content */

  display: block;
/*🚀注意这里若是没有这个 block ,是不会生效的， 由于写了 after ,只是表示是一个匿名的行盒，即一个字符串。 然而他必须是块级元素，他才会下去。*/

  clear: both;
}
/*🚀用伪元素这样写就是表示： 我在源文档 navbar 的最后生成了一个 block 元素， 而后清除浮动，他就会位于浮动盒子的下方， 进而撑开了 navbar 这个父容器。*/
复制代码

10-19.png

2. 🆚再对比

🔗源码及效果展现
为了通用性，咱们经常 .clearfix::after; ——就是为了修复浮动所产生的问题。
html

<ul class="navbar clearfix">
<!--🚀凡是须要清除浮动的地方咱们均可以加一个这个样式就能够通用-->

  <li><a href="#">1首页</a></li>
  <li><a href="#">2产品</a></li>
  <li><a href="#">3服务</a></li>
  <li><a href="#">4关于</a></li>
</ul>
复制代码

css

.navbar {
  list-style: none;
  border: 1px solid #ccc;
}
.navbar>li {
  float: left;
  margin-left: 15px;
}

.clearfix::after {
/*🚀为了通用性，咱们直接 clearfix ,而后在 HTML 文档中， 哪里须要清除浮动，就直接加一个这个类名进去就能够了。*/

  content: '';
  display: block;
  clear: both;
}
复制代码

4.2.2 解决上边由“浮动”带来的问题

🔗源码及效果展现
html

<div id="content" class="clearfix">
<!--🚀意思就是：这三个元素下边还有一个元素， 而后这个元素会在这三个元素的下方，进而就会撑开这个 content 。-->

  <div class="menu">侧边栏固定宽度</div>
  <div class="aside">侧边栏固定宽度</div>
  <div class="main">内容区块自适应宽度</div>
</div>
<div id="footer">我是 footer,但个人样式出现了问题</div>
复制代码

css

.menu {
  color: #fff;
  width: 150px;
  height: 300px;
  background: red;
  float: left;
}
.aside { 
  color: #fff;
  width: 150px;
  height: 300px;
  background: red;
  float: right;
}
.main {
  color: #fff;
  margin-right: 160px;
  margin-left: 160px;
  background: blue;
  height: 200px;
}
#footer {
  color: #fff;
  background: grey;
}


.clearfix::after {
/*🚀为了通用性，咱们直接 clearfix ， 而后在 HTML 文档中，哪里须要清除浮动，就直接加一个这个类名进去就能够了。*/

  content: '';
  display: block;
  clear: both;
}
复制代码

10-20.png

🏆小总结：
因此之后咱们想去实现一个水平布局，就有了两种方法：

  • 第一，inline-block——不须要清除浮动，简单，在设置居中时更方便，适合子内容很少的元素水平排列。但要注意缝隙问题，以及对齐（上对齐）；
  • 第二，float——没缝隙问题，适合稍大的布局。但须要解决的问题是父元素不会被撑开而致使的不少问题。

5 浮动和负 margin

两个浮动元素，若是因放不下致使其中一个下移，对下移的元素设置负 margin 值大于自身的宽度可将其上移。
🔗源码及效果展现
html

<div class="container">
  <div class="box box1">box1</div>
  <div class="box box2">box2</div>
</div>
复制代码

css

* {
  margin: 0
}
.container {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.box1 {
  width: 300px;
  height: 100px;
  background: pink;
  float: left;
}
.box2 {
  width: 110px;
  height: 100px;
  background-color: red;
  float: left;

  margin-left: -10px;  
/*🚀浏览器计算的时候就至关于宽度减去这个 10 ，而后就是 100，那就正好放上去。*/ 
}
复制代码

后记： 下篇咱们将讨论与“浮动”对应的“定位”是怎样让“盒子”动起来的。后续文章都是重中之重，每一篇都干货满满！

祝好，qdywxs ♥ you！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程