CSS浮动其实很简单

Jiavan 发布于2019-08-30 13:58 / 2338人阅读

摘要：实验最基本测验浮动实验对应结果实验结果分析因为为块标签，而且处于同一文档流当中，固会向下排列。实验左浮动，右浮动，左浮动浮动实验结果实验结果分析左浮动，所以失去块级作用，并且脱离标准文档流，因此在第一行最左边。

其实CSS浮动原理就三句话，不像网上的某些文章说的天花乱坠！

浮动必会脱离文档流

浮动会失去块级作用

浮动只在自己所在位置那行向左或者向右浮动

请仔细理解上面这三句话，下面我们来验证。

实验1. 最基本测验：




    css浮动

实验1对应结果：

实验1结果分析：

因为div为块标签，而且处于同一文档流当中，固会向下排列。

实验2 我让div1、div2、div3全部浮动




    css浮动

实验2对应结果：

实验2结果分析：

因为div1、div2、div3都添加了浮动属性，所以会失去块级作用，所以他们会排列在第一行，并且是在标准文档流之上。因为浮动只能在自己所在位置那行向左或者向右浮动，又因为浮动都在标准文档流之上，所以会依次排列。

实验3 我让div1浮动，div2不浮动，div3浮动




    css浮动

实验3结果：

实验3结果分析：

div1浮动，所以div1失去块级作用，并且脱离标准文档流，因此div1在第一行。
div2不浮动，因为div1浮动了，脱离了标准文档流，所以div2会在第一行的位置，并且在div1的下面。
div3浮动，因为div2不浮动，仍然是块级作用域，所以div3不可能跑到第一行去了，只能在第二行位置，因为浮动只能在自己所在行的位置向左或向右浮动，所以div3在第二行，并且脱离文档流。

实验4 div1左浮动，div2右浮动，div3左浮动




    css浮动

实验4结果：

实验4结果分析：

div1左浮动，所以div1失去块级作用，并且脱离标准文档流，因此div1在第一行最左边。
div2右浮动，所以div2失去块级作用，并且脱离标准文档流，又因为div1失去了块级作用，所以div2在第一行最右边。
div3左浮动，所以div3失去块级作用，并且脱离标准文档流，因为div1、div2都浮动了，所以div3会占到第一行的位置的下面，因为div3也具有浮动，而且左浮动，所以会在div1的右边位置。

清除浮动

清除浮动包括清除左浮动、清除右浮动、清除左右浮动
clear: left 让该标签的左边不能有其他标签，如果有，则他会跑到下一行
clear: right 让该标签的右边不能有其他标签，如果有，则他会跑到下一行
clear: both 让该标签的左右均不能有其他标签，如果有，则他会跑到下一行

云服务器私有云 c语言其实很简单浮动-前端-css 很简单爱很简单

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

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

css魔幻属性跟进篇

摘要：中是这样定义的属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。其同样适用于设置属性为绝对定位或固定定位的内联元素。至于为什么，可以理解为内联元素没有盒模型，其高度由内容决定。白话：即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后，这是自己写的第四篇CSS相关的文章，文章绝大部分是自己工作总结得来，另一部分是平日sf回答的与面试中向面试官交流学到的，都是一...

oogh 2019-08-30 14:16 评论0 收藏0
CSS布局说——可能是最全的

摘要：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。这些相对于布局来说是基础的，同时也是非常重要的。可以看到，浮动元素，其实对于布局来说，是特别危险的。前言现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思...

hearaway 2019-08-30 15:53 评论0 收藏0
我脑中飘来飘去的css魔幻属性

摘要：先来一张图，看懂的几个属性顺便带上图片出处，文章讲得还可以，理解这张图片，后面就好理解了。元素根据标签的属性决定显示输入框还是按钮。还有，还有近来很火的。最近看到一篇20 个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识，但却阻止了我做项目的速...

JouyPub 2019-08-29 14:02 评论0 收藏0
CSS魔法堂：说说Float那个被埋没的志向

摘要：时其宽度始终保持占满宽度的态度。清除浮动就是为浮动影响的范围划边界。那么可归结为的父容器包裹所有子元素。注意属性值不能为空白，否则无法清除浮动。前言定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Float的特性和行为特征，若有纰漏望各位指正...

legendmohe 2019-08-30 12:55 评论0 收藏0
margin合并、塌陷，清除浮动

摘要：合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。那我们怎么办，回到主题清除浮动。你可能忘了伪元素是行内元素，只有块元素才能清除浮动。所以我们最好后，主动清除一下浮动，避免以后遇到很奇怪的问题。这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名在校大学生，就是想把自己所学到的知识写出来，加深自己的印象，记录自己成长的过程，这篇文章主要是介绍HTML 、 CSS 的一些小知...

Alliot 2019-08-30 15:55 评论0 收藏0