电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 网页布局方式——浮动流（1） [打印本页]

作者: look_w 时间: 2019-2-19 15:19 标题: 网页布局方式——浮动流（1）

网页布局方式——浮动流

标签（空格分隔）： H5+CSS

[TOC]
网页布局方式——浮动流
简介

浮动流是一种"半脱离标准流"的排版方式
浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

注意点

1.浮动流中没有居中对齐, 也就是没有center这个取值
2.在浮动流中是不可以使用margin: 0 auto;

特点

在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是级元素/行内元素/行内块级元素都可以水平排版
在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
综上所述, 浮动流中的元素和标准流中的行内块级元素很像

浮动元素脱标

1.什么是浮动元素的脱标?
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标

2.浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
浮动元素排序规则

1.浮动元素排序规则
1.1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
1.2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
浮动元素贴靠现象

1.什么是浮动元素贴靠现象?
1.如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
2.如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
3.如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)