1、浮动(float)
提示:我们一般网页上下用标准流,左右用浮动来写
1.1传统网页布局三种方式
网页布局本质——用css来摆放盒子,把盒子摆放到相应位置。css提供了三种传统布局简单方式,说就是盒子如何进行排列顺序:
- 普通流(或者叫标准流)
- 浮动
- 定位
1.2标准流(普通流、文档流)
所谓的标准流,就是标签按照规定,好默认方式排列。
1、块级元素会独占一行,从上向下顺序排列。
- 常用元素:div、hr、p、h1~h6、ul>li、dl>dt、form、table
2、行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。
- 常用元素:span、a、i、em.........等
以上都是标准流布局,我们前面学习的就是标准流,标准流就是基本的布局方式。这三种方式都是用来摆放盒子,盒子摆放到合适位置,布局自然就完成了。
注意:
实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式)。
1.3为什么需要浮动
总结:有很多布局效果,标准流没有办法完成,此时就可以利用浮动(float)完成布局,因为浮动可以改变元素标签默认的排列方式:
浮动最典型的应用:可以让多个块元素、行内排列显示、网页布局第一准则:
多个块级元素纵向排列找标准流
多个块级元素横向排列找浮动
float:“left”;
注意:
不是div标签标准流不行,可以用标准流行内块模式,因为每一个div标签中间有空格或者间隙,
display: inline-block;结果:
所以用浮动float来,表达式:float:left或者right;结果:
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了标准流行内块 display: inline-block;和浮动float:left、right的区别。
1、浮动(float)相关推荐
- 经验分享:CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 【响应式Web前端设计】CSS浮动(float,clear)讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 如何清除浮动(float)所带来的影响
清除浮动(float) 1.定义和用法 在w3c中给了浮动这样的定义. "float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css --- [读书笔记] 浮动(float) 与 清除浮动
说明 源代码 学习 1. 浮动 1.1 CSS布局的三种机制 网页布局的核心 - 利用 CSS 来摆放盒子 CSS提供了3种机制来设置盒子的摆放位置: 标准流.浮动和定位. 标准流: 块级元素(div ...
- 深度css:关于浮动(float,clear)的图形化理解
接触CSS以来,有人说浮动始终给人一种神秘的感觉,正因为有了它的一成不变的table布局开始了渐渐被div+css取代,它是控制传说中文本流核心和关键要素,懂得控制"块"的流动和布 ...
- 关于CSS浮动(float,clear)的通俗讲解(经验分享)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 杨元:CSS浮动(float,clear)通俗讲解
zt http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
- 盒子横向排列-初识浮动Float(HTML、CSS)
盒子横向排列-初识浮动Float(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><met ...
- 浮动Float(HTML、CSS)
浮动Float(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset ...
最新文章
- pytorch dataloader num_workers参数设置导致训练阻塞
- opengl基础学习专题 (二) 点直线和多边形
- MusicXML 3.0 - DTD 速查
- 上传图片实时显示 兼容 ie11
- bash 后台程序_如何向您的Bash程序添加帮助工具
- 卢伟冰暗示Redmi Note9即将到来:千元机的不二之选
- HTTP服务器状态代码定义
- 新一配:iPod及其系列产品【转载】
- 当前企业最流行的三种软件开发模式
- 2022年全球市场光学软件总体规模、主要企业、主要地区、产品和应用细分研究报告
- vs2015使用教程
- java调用银联支付接口开发,银联在线Java接口开发
- 4分用计算机算,4分制绩点换算(4分制绩点计算器)
- 苹果电脑怎么打印cpa准考证
- 2021 国内外 IoT 物联网平台汇总
- OPENMV羽毛球识别
- 解决:BT5 /pentest/misc/openvas/openvas-check-setup.sh: No such file or directory
- 《Unity Magica Cloth从入门到详解》之(5)MeshSpring
- 搜索引擎收录地址入口
- 传统IT人的崩溃瞬间……