码迷,mamicode.com
首页 > Web开发 > 详细

css浮动(float)全方位案例解析

时间:2019-03-30 18:52:54      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:方向   一个   设置   order   前言   破坏   splay   高度   案例   

前言

浮动最早的使用是出自<img src="#" align="right" />,用于文本环绕图片的排版处理。当然也是一种常用的布局方式。

float 浮动

浮动元素脱离普通流,然后按照指定方向,向左或者向右移动,碰到父级边界或者另外一个浮动元素停止

值: left | right | none | inherit(继承)
初始值: none
应用于: 所有元素
继承性: 无

浮动特性

【浮动流】
正常流中元素一个接一个排列;浮动元素也构成浮动流

效果展示:

默认是display:block 独占一行,当使用float的时候可以看到形成了一个浮动流。

【块级框】
浮动元素自身会生成一个块级框,而不论这个元素本身是什么,使浮动元素周围的外边距不会合并

效果展示:

【包裹性】
浮动元素的包含块是指其最近的块级祖先元素,后代浮动元素不应该超出包含块的上、左、右边界。若不设置包含块的高度,包含块若浮动,则包含块会延伸,进而包含其所有后代浮动元素;若不设置包含块的宽度,包含块若浮动,则包含块宽度由后代浮动元素撑开。

通俗的理解就是:子元素若不设置浮动,父元素如果没有设置高度的话,则是由子元素撑开,如果子元素设置了浮动,父元素的高度则不会由子元素撑开。除非父元素也是浮动或者清除浮动,都可以让父元素包裹住子元素

效果展示:

【破坏性】
浮动元素脱离正常流,并破坏了自身的行框属性,使其包含块元素的高度塌陷,使浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框重新排列

效果展示:

浮动的主要特性就是以上几点,动起手来多点点案例,就会对这个特性更加熟悉。

效果展示:

css浮动(float)全方位案例解析

标签:方向   一个   设置   order   前言   破坏   splay   高度   案例   

原文地址:https://www.cnblogs.com/shiyou00/p/10628374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!