HTML中关于浮动的知识点

àì夳堔傛蜴生んèń 2021-09-15 12:28 424阅读 0赞

1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止

2.浮动换行：当一行没有足够空间存放所有浮动块时，多出来的盒子会挤到下一行，然后按照设定的方向继续移动，直到遇到父级盒子的边缘或其他浮动块的边缘

3.浮动坍塌：当父级盒子没有设置具体高度，并且子级浮动的情况下，父级的高度会丢失，就是浮动的坍塌。（导致与父级盒子平级的文本会向浮动的盒子下方移动）

4清除浮动

父级固定高设置：不灵活

父级设置浮动：用来判断是否要进行清浮动的处理

父级最后一个子级位置添加block快，该快设置

clear:both;

父级选择器::after\{

content:"";

display:block;

clear:both;

\}

BFC:块级格式化上下文

overflow:hidden;（超出部分隐藏）

::after 给盒子的最后一个位置，添加一个自定义的标签

::before 给盒子的第一个位置，添加一个自定义标签

5.浮动快特性：

1.所有的盒子都有可以浮动,并且在浮动脱离原文本流 后，将不在具有原有盒子的特性

2.支持所有的样式设置

3.在不设置大小时，尺寸由内容撑开

4.四个方向的margin会叠加

5.水平布局方向不在固定

6.非浮动块特性：

Block：会向上占据浮动块所空出的区域，可以被浮动块遮盖

inline,inline-block，文字

无法出现在浮动块所覆盖的渔区，一般形成环绕效果

7.浮动换行阻挡

一般情况下出现在瀑布流布局当中 如果上一行的浮动块高度不一致，就会导致当前行浮动块在浮动过程中被阻挡，margin也是浮动块停止的边缘。

一般情况下高度不一致，往往是由盒子的内容高度不一致，问题最多就是图片，当每个图片的高度比不一致时，设置相同的高度，高度会有差异，

解决办法：

移动端：给图片一个固定高度

设置object-fit:cover;

pc端：

1.图片差异不大

给所有的图片给相同的固定高

2.图片高度差异很大

<div class="box">

<img src="" alt="">

</div>

box作为可是区域，宽度大小固定。

图片在盒子中的大小设置要沾满，甚至

超出box的可视区域。Box本身设置overflow:hidden属性

发表评论取消回复

表情：

评论列表（有 0 条评论，424人围观）

还没有评论，来说两句吧...

相关阅读

相关 html元素设置浮动,html浮动元素

1. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定

秒速五厘米/ 2022年10月09日 13:29/ 0 赞/ 225 阅读

相关关于xml的知识点

XML是一种成熟的技术，经常作为从一个平台到其他平台传输数据的标准。本文包含10道常见的XML知识点。这些知识点大部分在Java面试中会问到，同时在C，C++，Scala或

男娘i/ 2022年06月09日 00:29/ 0 赞/ 201 阅读

相关关于HTML中select标记的一些知识

select标记是网页编程中比较常用的一种标记，身为表单标记的一员，它主要是通过option标记结合其他表单标记（诸如input，textarea）一起来实现

水深无声/ 2022年05月08日 09:46/ 0 赞/ 409 阅读

相关 Html相关知识点

web 基础的课程 html css javascript--js 后续服务器端技术 jquery.ajax 静态页面(客户端技术) html:页面的内容用适

痛定思痛。/ 2022年04月12日 08:40/ 0 赞/ 462 阅读

相关关于浮动的清除

为什么要清除浮动举例来看： <div id="father"> <div id="child1">

冷不防/ 2022年01月26日 05:27/ 0 赞/ 175 阅读

相关 HTML中关于浮动的简单说明

1.首先，标签之所以有存在等级分类，是因为他们处于标准文档流（块级元素，行内元素，行内块元素）当中。 2.如何脱离标准文档流？浮动绝对定位固定定位

雨点打透心脏的1/2处/ 2021年11月18日 00:12/ 0 赞/ 391 阅读

相关 HTML操作知识点

HTML知识点 HTML知识点 1)网页文档的声明:!DOCTYPE 2)网页最大的结构性标签:html lang='语言' 3)存放网页的基本信息:head

快来打我*/ 2021年10月26日 13:20/ 0 赞/ 402 阅读

相关 html中关于form表单的基本知识点

表单输入框采集的信息：提交给后端，是通过form标签的action属性来完成的，其中的Method属性设置了请求提交方式，默认情况是get, 发送的数据都是以

偏执的太偏执、/ 2021年09月15日 13:34/ 0 赞/ 623 阅读

相关 HTML中关于浮动的知识点

1.浮动原理：浮动在当前行，脱离原来文本，进入到新的一层（浮动层），然后在设定的方向（左右）移动，直到遇到父级盒子的边缘，或者其他浮动块的边缘停止 2.浮动换行：当

àì夳堔傛蜴生んèń/ 2021年09月15日 12:28/ 0 赞/ 425 阅读

相关 html基础知识点

概念： Hyper Text Markup Language (超文本标记语言) ☞超文本：在网页中能够实现页面跳转的文本【超链接标签】

逃离我推掉我的手/ 2021年09月15日 01:30/ 0 赞/ 451 阅读