【学习笔记】CSS深入理解之float

denson 发布于2019-08-29 17:31 / 1474人阅读

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。

张鑫旭的CSS深入理解之float浮动学习笔记

float的历史

float为产生文字环绕效果而生

float的特性 — 包裹和破坏

包裹：即产生一个BFC
破坏：使父容器塌陷，元素脱离文档流，产生inline boxes环绕

清除浮动

方式一：使用clear，类似于产生一个连接索道，使前文和后文关联，会产生margin重叠效果。

clear: both，这个元素和源码中后面的元素将不浮动

非浮动元素和浮动元素之间不能通过外边距撑开距离

因此需要一个多带带的非浮动元素充当索道

方式二：父容器BFC或者haslayout(IE6/IE7) - 封闭容器，不会产生margin重叠

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.clearfix {
    *zoom: 1; /*IE6, IE7产生haslayout*/
}

float的表现

元素block化：inline元素被block化
去空格化，空格符成为环绕文本

浮动与流体布局应用

文字环绕效果
https://codepen.io/curlywater...

左中右效果
https://codepen.io/curlywater...

单侧固定
https://codepen.io/curlywater...

DOM与显示位置匹配的单侧固定
https://codepen.io/curlywater...
第一种实现方式，保证向右浮动的元素写在前（先布局），内容区设置margin-right
第二种实现方式，为了使DOM和现实顺序一致，对内容区加一个向左浮动的盒子，没有指定宽度的盒子利用外边距保留剩余空间，实现宽度拉伸。使用负margin把左浮动的头像区移动到同行。

两侧自适应
https://codepen.io/curlywater...
使用table-cell产生一个BFC，去除掉浮动的影响

总结

浮动起源于实现文字环绕效果。

为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为inline boxes围绕元素排列。

从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。

GPU云服务器云服务器深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

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

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

【学习笔记】CSS深入理解之absolute

摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。《张鑫旭的CSS深入理解之absolute》学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代绝对定位的行为表现无依赖绝对...

Anleb 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之z-index

摘要：张鑫旭的深入理解之学习笔记层叠上下文什么是层叠上下文在轴上延伸出一个层级，离父级层叠上下文的顶部更近。遵循后来居上和谁大谁上的层叠原则。张鑫旭的CSS深入理解之z-index学习笔记层叠上下文什么是层叠上下文？在z轴上延伸出一个层级，离父级层叠上下文的顶部更近。如何产生层叠上下文？根元素具有根层叠上下文 z-index不为auto的定位元素一个 z-index 值不为 ...

Steven 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之vertical-align

摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值百分...

ermaoL 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之margin

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素，可改变元素水平方向的可视尺寸占据尺寸对于元素，可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸可视尺寸：对于没有设定width的块元素，margin可改变元素水平方向...

stefan 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之padding

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸元素值过大，一定影响元素尺寸为定值，会影响元素尺寸为或者为，同时值没有暴走，不影响元素尺寸元素水平影响尺寸，垂直不影响尺寸，但是会影响占据空间会显示背景色负值与百分比单位不支持负值百分比相对于自身宽张鑫旭的CSS深入理解之padding学习笔记 padding与容器的尺寸 block元素 padding值过大，一定影响元素尺寸 width为定...

learn_shifeng 2019-08-30 15:54 评论0 收藏0