HTML之float浮动

可以看一下大神的理解很详细：https://blog.csdn.net/qq_20404903/article/details/49024247

一、浮动的理解

浮动的框可以向左向右移动，知道它的外边缘碰到包含框（父亲框）或者其他的浮动框位置，因为浮动框不在文档的普通流中，所以文档的普通流中的块框表现的就行浮动框不存在一样

二、浮动的分类：

left: 左浮动

right: 右浮动

none: 默认值，不浮动

inhert: 继承父亲框的浮动属性

三、怎么理解浮动脱离了标准文档流

1.要搞清这个问题，首先要明白什么是标准文档流

标准文档流布局情况：从上到下、从左至右分布，遇到块级元素换行

2.分析

脱离标准文档流就是不符合上面的分布状况了，而我们的浮动float已经实现遇块级元素不换行了，所以我们只需先证明这一点就行了。

3.演示

没有使用浮动：

代码：

</div>

效果图：

div1使用左浮动：

效果图：

4.结论

当div1使用左浮动时，该div已经脱离了原来的轨迹，完全浮动到下个块状元素的上方,下面的块状元素就当做上方没东西，所以就占用了上面的元素的位置

四、我对float的理解

首先要明白什么是行内元素和块状元素

块状元素：可以设置width、height;可以设置内外边距；独占一行（除了使用float之外）

行内元素：不可以设置width、height但是可以使用line-height替代;内外边距（padding、margin）的左右边距可以设置，上下不起作用；不是独占一行

1.使用了浮动之后就相当于将该元素抠出来了，将之放在假想的第二层，不影响下面的块状元素操作，就长做浮动的元素不存在就行了，记住我这里说的是不影响块状元素的操作。

2.两个相邻的浮动元素可以认为是在同一层

3.如果元素（包括块状和行内元素）使用浮动，紧接着的如果是行内元素就相当于使用了左浮动、

下面我对上面的理解用实例来解释一下

实例：

原代码：

#div2{
width: 200px;
height: 50px;
background-color: green;
}

#div3{
width: 300px;
height: 50px;
background-color: black;
}

#div4{
width: 400px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<input id="input1" type="text" value="input1">
<div id="div4">div4</div>
<input id="input2" type="text" value="input2">
</body>

效果图：

（1）、添加div1的左浮动

效果图

可以得出第一个结论

（2）、div1和div2一起使用左浮动

说明：div1和div2把div3给覆盖了

可以看出来两个浮动元素都在第二层

（3）div3添加左浮动

行内元素input1相当于一个添加了一个float一样与div3一起在第二层

五、当多个浮动在同一行不够位置填充的情况下

如果右侧宽度不够，就向下面显示，首先会找到高度最小的那个，如果右侧还有高度较高的，则在这个高的右侧再找高度最小，知道找到右侧没有较高的，倘若到了最后都没找到，就转到下一行最左侧填充，应该填充在上面的浮动的最突出的水平线之下

看例子

代码：

</body>

效果：

现在给四个div都添加上左浮动

div1和div2换一下位置

div2和div3换一下位置

div1和div3换一下位置

HTML之float浮动相关推荐

css选择器及float(浮动)
--------------------------选择器( css有就近原则)------------------------------- 选择器名称在css表的 ...
CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
CSS布局之float浮动
之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料 ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
html中使浮动的字为行排列,CSS布局：float浮动
优秀文章:https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 浮动细节原理所有元素设置float浮动之后,会脱离文档流 ...
CSS:盒子模型和清除float浮动的三种常用方法
目录一:浮动产生原因: 二:浮动产生副作用: 三:浮动解决方法: QUESTION:CSS盒子模型清除浮动? ANSWER: 一:浮动产生原因: 一般浮动是什么情况呢?一般是一个盒子里使用了CSS ...
html 为什么ul不撑开,给li设置float浮动属性之后，无法撑开外层ul的问题。
以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的. 给li设置float浮动属性之后,无法撑开外层ul的问题. ul{ border: 1px solid #000; width: 20 ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
CSS清除浮动清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示由于浮动产生,如果对父级设置了(CSS b ...

HTML之float浮动

HTML之float浮动相关推荐

最新文章

热门文章