css-浮动

1treeS 发布于2019-08-29 17:11 / 853人阅读

摘要：然而，接着浮动盒创建的当前及后续行盒会进行必要的缩短，为了给浮动盒的让出空间。

一，浮动的定义

一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐。如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了

因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着浮动盒创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。

二，浮动的例子

浮动的定义很枯燥，下面我们通过几个例子，来理解浮动的概念。
1.浮动盒放不下会换行
demo 链接描述


  1
  2
  3

执行结果
所有盒子都会向左浮动，直到外边沿挨着块边沿。由于容器宽度不够，box3放不下，就只能向下移动最左边

2.被卡住
demo 链接描述


  1
  2
  3

执行结果
由于box1的高度比box2的高，box3在向下向左移动的时候，遇到了box1的外边沿，就停止移动了。

3.浮动和文本
demo链接描述


  1
  挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐
如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
  2
  3

执行结果
我们给p段落加上背景色，发现p段落是看不见浮动元素的，但里面的文字是可以看见浮动元素的。
当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的，行盒会缩短并给浮动元素让位。

写一下我理解的行盒的概念。行盒就是 line-box，也就是一个块级元素展示出的每一行就是一个行盒。块级元素内展示在一行的所有元素共同构成了一个行盒。比如下图的img和span1构成一个行盒，剩下2个span和button构成另外一个行盒。当页面面积发生改变，每行的内容变化，行盒的内容也会变化。
这里有一篇写行盒(line box)垂直方向的文章链接描述

4.浮动会脱离普通流
普通流中所遵循的规则是块级元素占据一行，行内元素占据内容的宽度。所有元素从上到下依次排列，普通元素可以把父元素的内容撑开。
但浮动元素脱离了普通流，元素不是一个个从上到下排列的，浮动元素也不能把父元素撑开，因为父元素压根就看不见浮动元素。
demo链接描述

5.块级元素设置浮动之后，宽度会收缩，宽度由内容决定。
行内元素设置浮动之后，可以设置宽高，内外边距。
感觉有点像inline-block的特性


  这是div
  这是span

执行结果

当我们取消浮动，结果是div占据一整行，span不能设置宽高和内外边距。

6.用浮动设置一个简单的导航栏

三，浮动的副作用

1.对后续元素位置产生影响
demo：链接描述

 
    侧边栏固定宽度
    侧边栏固定宽度
    内容区块自适应宽度    
  
  我是 footer，但我的样式出现了问题

执行结果：
由于浮动元素脱离普通文档流，导致浮动元素后面下一个元素footer的排列会出错。

（2）父容器高度计算出现问题
父元素看不到浮动元素，如果父元素没有设置高度，浮动元素是无法撑开父容器的。
demo链接描述
/li里面的元素全部浮动的情况下，.navbar的高度为0，所以设置背景色无效

四：清除浮动

(1)clear属性
clear可以用于任何元素，无论是不是浮动元素都可以加。

clear: left;

官方解释：要求该盒的top border边位于源文档中在此之前的元素形成的所有左浮动盒的bottom外边下方
不正经的理解：如果我前面有左浮动元素，我必须位于它的下方

clear: right;

官方解释：要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方
不正经的理解：如果我前面有右浮动元素，我必须位于它的下方

clear:both;

如果我前面有浮动元素，我必须位于它的下方

（2）封装一个clearfix的属性，用于父元素清除浮动
原理：父元素看不见元素，导致高度不正常。那我们就放一个普通元素在父元素的最后，把高度撑开。因用伪元素可以省一个标签，所以就用伪元素

.clearfix::after {
  content:"";  //在父元素的最后生成一个内容为空的元素。
  display: block; //生成的伪元素是内联元素，需要设置成块级元素来占位置啊
  clear: both;  //把这个元素清除浮动，放在父元素的最下方，把父元素撑开
}

使用：把.clearfix封装成一个属性，以后想要在哪里清除浮动，就给它的父元素加上.clearfix的属性。
demo链接描述

五：浮动和负margin

两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin 值。
当-margin加自身的宽度小于容器的宽度，可将其上移.
如图所示，当box2的负margin为-2px，才能上移。

六：总结

1、浮动元素脱离了普通文档流，文档的普通流中的元素表现的就像浮动元素不存在一样，但文本可以看见浮动元素
2、设置浮动后行内元素拥有一些块级元素的特性，可以设置宽高margin
块级元素有了行内元素的特性，不再占据一整行，宽度决定于自身内容
3、浮动元素不会将父容器撑开
4、浮动元素左右浮动时遇到其他浮动元素会停止
5、如果用了浮动，其父元素最好需要清除浮动

云服务器 GPU云服务器浮动-前端-css html浮动向上浮动上下浮动左右浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114158.html

理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

Tonny 2019-08-29 12:23 评论0 收藏0
理解CSS浮动与清理

摘要：浮动为什么会有文本环绕效果产生这个疑问主要来自于以往的印象浮动的元素是脱离文档流的。也就是说，浮动元素的确脱离了文档流，因此文档流中的块框会无视浮动的元素，但是文本不会。作为前端写了很多页面布局，但是浮动这块一直是我似懂非懂的盲点，一方面用浮动能实现很多布局，另一方面浮动造成的影响又会破坏布局让人头疼，所以今天就特地写篇博文解决这块盲点。本文主要讨论以下几个问题：1.浮动的原始用途...

cyqian 2019-08-01 16:39 评论0 收藏0
了解CSS浮动以及清理浮动（Float）

摘要：浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，相当于不占用空间，所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS ...

TZLLOG 2019-08-28 18:08 评论0 收藏0
理解CSS浮动与清除浮动

摘要：那我们举个栗子当先声明一个元素向左浮动时，由于脱离文档流，这个元素的右边就会空出一片空间，空间的长宽与浮动元素长宽相同。总结总结下来，浮动与清除浮动的顺序关系如下设置元素浮动，元素脱离文档流，不计算高度。本文主要探讨两个问题：为什么CSS设置浮动会引起父元素塌陷为什么设置clear:both能清除浮动，并撑开父元素。起因 CSS的浮动，算是我在写网页时用的最多的属性之一。但...

刘东 2019-08-30 12:45 评论0 收藏0
CSS-清除浮动

摘要：清除浮动方法方法一使用带属性的空元素在浮动元素后使用一个空元素如，并在中赋予属性即可清理浮动。什么是CSS清除浮动？在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象...

刘厚水 2019-08-30 12:54 评论0 收藏0
CSS浮动其实很简单

摘要：实验最基本测验浮动实验对应结果实验结果分析因为为块标签，而且处于同一文档流当中，固会向下排列。实验左浮动，右浮动，左浮动浮动实验结果实验结果分析左浮动，所以失去块级作用，并且脱离标准文档流，因此在第一行最左边。其实CSS浮动原理就三句话，不像网上的某些文章说的天花乱坠！浮动必会脱离文档流浮动会失去块级作用浮动只在自己所在位置那行向左或者向右浮动请仔细理解上面这三句话，下面...

Jiavan 2019-08-30 13:58 评论0 收藏0