带你彻底了解CSS浮动（文字整理版）

AlphaWatch 发布于2019-08-29 14:09 / 2553人阅读

摘要：谢老板谢然最近在讲堂上开了一个视频课程带你彻底掌握浮动，因为视频比较长分钟，不方便回顾，我将之做了一个整理，并从我自己理解的角度进行了阐述，以做记录。相应的背景文档浮动结语以上就是谢老板在视频中的内容，希望帮助到大家。

谢老板（谢然）最近在segmentfault讲堂上开了一个视频课程《带你彻底掌握CSS浮动》，因为视频比较长（69分钟），不方便回顾，我将之做了一个整理，并从我自己理解的角度进行了阐述，以做记录。

页面布局是CSS的一个重点应用，例如：

而实现页面布局主要应用到两种方法，一种是CSS浮动，一种是Flexbox（IE9以上），本文主要讲的是CSS浮动，下一篇文章将阐述Flexbox。

浮动元素

什么是浮动元素：浮动元素同时处于常规流内和流外的元素。其中块级元素认为浮动元素不存在，而浮动元素会影响行内元素的布局，浮动元素会通过影响行内元素间接影响了包含块的布局。

常规流：页面上从左往右，从上往下排列的元素流，就是常规流 
脱离常规流：绝对定位，fixed定位的元素有自己固定的位置，脱离了常规流
包含块：一个元素离它最近的块级元素是它的包含块

下面详细描述以上的内容，举个?：




  
  
  JS Bin



    
        
        
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

上面这段代码显示的样子如下：

块级元素认为浮动元素不存在：红色的块级元素没有受到粉色浮动元素的影响，还展示在左上角的位置，但是被粉色元素盖住了左边的部分

浮动元素会影响行内元素：文字部分被蓝色浮动元素影响，空出了蓝色浮动元素的部分

浮动元素会间接影响了包含块的布局：浮动元素影响了文字部分吗，使之多出了一行，文字部分撑高了最外面的border框，所以间接影响了包含块的布局。

其中，浮动元素的摆放会遵循如下的规则：

尽量靠上

尽量靠左

尽量一个挨着一个

不能超出包含块，除非元素比包含块更宽

不能超过所在行的最高点

不能超过它前面浮动元素的最高点

行内元素绕着浮动元素摆放：左浮动元素的右边和右浮动元素的左边会出浮动元素

应用

浮动元素并不能撑起包含块，这和我们的预期并不相符。通过以下的办法可以将包含块撑开，称之为闭合浮动

闭合浮动的方法：

BFC: 1) 包含块设置overflow:hidden 或者 2)包含块设置display:table-cell/table/flex...

BFC：块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的块级元素如何布局，并且与这个区域外部毫不相干。
只要符合以下的条件就是BFC:
1) 根元素
2) float属性不为none
3) position为absolute或fixed
4) display为inline-block, table-cell, table-caption, flex, inline-flex
5) overflow不为visible

相应的背景文档可以参阅：《BFC的神奇原理》

伪元素：

.clearfix::after {
    content: "";
    display: block;
    clear: both;    
}

clear:both;意味着块级元素的左边和右边都不能有浮动元素。在包含块的末尾建立了一个内容为空的伪元素，并设置clear:both，使这个元素位于所有的浮动元素之后，从而撑开了包含块的高。

包含块自己也浮动

这个方法也是w3c使用的方法。不过，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

相应的背景文档：《W3C CSS浮动》

结语

以上就是谢老板在视频中的内容，希望帮助到大家。

服务器托管超融合服务器文字浮动提示浮动-前端-css 带你学c带你飞带你搭建阿里云服务器系统

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

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

解剖CSS布局原理

摘要：前言本文将带你重新认识布局，带你解剖布局原理，前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流，这是其他元素做不到的。前言本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。此文主要为理...

李文鹏 2019-08-29 12:28 评论0 收藏0
css float的深入研究

摘要：去年就看到张鑫旭大神的这篇文章，看了好几遍才看懂。而对于使用脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。而这造成的显示上的差异就是文档流中的文字实体不会与浮动元素重叠，而会与绝对定位元素重叠。去年就看到张鑫旭大神的这篇文章，看了好几遍才看懂。后来再去想其中的一些原理，又忘了。于是打算把它记下来，一来做个备份，二来希望与君共勉。这里我对文章以自己的理解做了一些精简，完整版...

Tony 2019-08-29 12:25 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
CSS基础知识整理

摘要：语法基础语法规则由两个主要部分构成选择器以及一条或多条声明。语法名属性属性值属性属性值属性属性值选择器选择器用于描述一组元素的样式，也叫做类选择器。后代选则器又称为包含选择器，以空格分隔，子元素选择器只能选择作为某元素子元素的元素。 1 什么是CSS？ CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高...

Edison 2019-08-30 11:09 评论0 收藏0