15-CSS基础-浮动流
浮动
网页的布局方式
什么是网页的布局方式?
- 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)排版方式
- 其实浏览器默认的排版方式就是标准流的排版方式
- 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
- 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
- 垂直排版, 如果元素是块级元素, 那么就会垂直排版
- 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
浮动流排版方式
- 浮动流是一种"半脱离标准流"的排版方式
- 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:
- 浮动流中没有居中对齐, 也就是没有center这个取值
- 在浮动流中是不可以使用margin: 0 auto;
特点:
- 在浮动流中是不区分块级元素/行内元素/行内块级元素的
- 无论是块级元素/行内元素/行内块级元素都可以水平排版
- 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
- 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
定位流排版方式
浮动元素的脱标
- 什么是浮动元素的脱标?
- 脱标: 脱离标准流
- 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
- 浮动元素脱标之后会有什么影响?
- 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
浮动元素排序规则
- 浮动元素排序规则
- 相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
<style>.box1{float: left;width: 50px;height: 50px;background-color: red;}.box2{float: left;width: 100px;height: 100px;background-color: pink;}.box3{float: left;width: 150px;height: 150px;background-color: yellow;}
</style>
- 不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
<style>.box1{float: left;width: 50px;height: 50px;background-color: red;}.box2{float: right;width: 100px;height: 100px;background-color: pink;}.box3{float: left;width: 150px;height: 150px;background-color: yellow;}.box4{float: right;width: 200px;height: 200px;background-color: tomato;}
</style>
- 浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
<style>.box1{float: left;width: 50px;height: 50px;background-color: red;}.box2{width: 100px;height: 100px;background-color: pink;}.box3{float: left;width: 150px;height: 150px;background-color: yellow;}.box4{float: left;width: 200px;height: 200px;background-color: tomato;}
</style>
浮动元素贴靠现象
- 什么是浮动元素贴靠现象?
- 如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示
- 如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠
- 如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边
-
浮动元素字围现象
- 什么是浮动元素字围现象?
- 浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现象
div{float: left;width: 100px;height: 100px;/*background-color: red;*/border: 1px solid #000;}p{width: 500px;height: 500px;background-color: yellow;}
- 应用场景
- 图文混排
学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038
15-CSS基础-浮动流相关推荐
- 【Web前端HTML+CSS基础——常规流和浮动(猫眼电影项目实战)】
文章目录 常规流 常规流的布局 浮动 应用场景 浮动的基本特点 盒子尺寸 盒子排列 高度坍塌(造成网页布局样式混乱的根源) 浮动知识点练习代码: 浮动练习代码1: 浮动练习代码2: 浮动项目实战--猫 ...
- CSS基础——浮动(float)【学习笔记】
1. 浮动(float) 1.1 CSS 布局的三种机制 网页布局的核心--就是用 CSS 来摆放盒子. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流).浮动和定位,其中: 普 ...
- CSS基础: 浮动 以及清除浮动
其实理解浮动之前,需要首先了解网页布局的三种方式. 网页布局的本质就是:通过CSS来摆放盒子,把盒子摆放到相应的位置. 而CSS提供的三种传统布局方式,简单的说就是盒子如何进行排列顺序. 普通流(标准 ...
- HTML+CSS基础知识
一.HTML基础 1.html的基础结构: 2.html中的语法: - 在尖角符号后面的第一个英文单词就是当前标记的名称 - 标记也可以称为标签或者元素 - 双标签结束的反斜杠不能省略 但是单标签的反 ...
- CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- css无效 https_【CSS非全解02】CSS基础-文档流
基本概念 文档流 mdn 块.内联.内联块? margin合并 两种盒模型 文档流 Normal Flow 流式布局 mdn 文档流动方向 从左到右:"https://developer.m ...
- CSS基础(10)- 常规流
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 常规流 常规流布局 块盒 参考资料 常规流 盒模型:规定单个盒子的规则 视觉格式化模型(布 ...
- CSS基础(11)- 浮动
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 浮动 应用场景 浮动的基本特点 盒子尺寸 盒子排列 高度坍塌 参考资料 浮动 视觉格式化模 ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
最新文章
- DriverManager 驱动管理器类简介 JDBC简介(三)
- 与或非逻辑符号_理解FPGA的基础知识——逻辑电路
- Ubuntu18.04下安装MySQL
- Why NoSQL?
- 生成树(STP)学习笔记
- mysql: union / union all / 自定义函数用法详解
- Java 微服务框架选型(Dubbo 和 Spring Cloud?),大厂 HR 如何面试
- 如何为开源项目做市场
- 学习总结(一):ad画板总结
- 恩智浦智能车入门——一定避免那些坑
- java打包时打入本地依赖包
- 笔记本电池不充电了 无法充电 如何激活
- WIN10专业版如何调整系统字体大小
- Android之视频裁剪
- sound函数及大调音阶播放
- Java Swing 开发总结汇总贴
- Java车牌号校验正则表达式
- 电脑屏幕录制软件哪个好用?推荐这2款!
- 一秒钟实现Andriod系统文件访问
- 基于Rasa框架搭建中文机器人对话系统