CSS - 浮动元素的margin-left和margin-right

左手的ㄟ右手 2023-10-03 10:49 19阅读 0赞

# marigin-left和margin-right理解 #

margin-left：“盒子”元素的左外边距，当属性值增大，元素表现为向右移动，该属性值减少，元素表现为向左移动。

margin-right："盒子"元素的右外边距，当属性值增大，元素表现为向左移动，该属性值减少，元素表现为向右移动。

# float:left和float:right理解 #

float:left 元素变为浮动元素，并向左浮动

float:right 元素变为浮动元素，并向右浮动

# 单纯的float:left #

当前有如下情况：

container.width=500px

box1,box2.width=300px

且box1,box2是float:left的，最终呈现如下图，box2因为上面一行闲置宽度只有500-300=200px

所以box2上浮不上去了，只能被挤到第二行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70][]

# （float:left + margin-left/right:负数px）产生的神奇现象及其原因 #

那么有没有办法将box2上浮上去呢?(不使用定位)

当前contaner第一行闲置宽度只有200px，那么是不是box2的宽度减少到200px就可以浮动上去了呢？

我们直到HTML中所有元素都是盒子，具有盒子模型，一个盒子的宽度可以看成:

> 内容宽度+（左右）padding宽度+ （左右）border宽度 + （左右）margin宽度

其中内容宽度，paddin宽度，border宽度都不能是负数，只有margin宽度可以是负数。

所以可以在左右margin上做负数移动。

例如box2如果想要上浮到第一行，则宽度需要减少到200px，当前宽度是300px,所以只需要-100px就可以。

## **若box2** float:left + **margin-left：-100px**  ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 1][]

可以发现box2在margin-left:-100px之后，整体上浮到了第一行，且是**box2右边框线贴着container右边框线**，**为什么不是box2的左边框线贴着box1的右边框线呢**?

我们需要理解，box2在margin-left:-100px之后，box2的有效宽度只剩下200px了，溢出去的100px可以看成是无效宽度（注意是无效，而不是失效宽度），所以能够填充进第一行闲置200px宽度区域的只能是box2的有效区域了。

观察下margin-left:-99px，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 2][]

其中分为99px的无效宽度区，和201px的有效宽度区。（没有考虑border，方便理解）

再观察下margin-left:-100px，可以看到填充进container第一行闲置区域的就是box2的有效区域，而box2的无效区域已经覆盖了box1部分区域。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 3][]

如果margin-left：x<-100px,比如-200px，那么box2会继续覆盖box1吗？

会，因为margin-left:-200px可以看成是box2有效宽度继续减少

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 4][]

如果margin-left:-400px，会发生什么？

当margin-left:-100px时，box2会上浮一行，此时box2还剩余200px有效宽度

当margin-left=-400px时，此时box2肯定会上浮一行，且box2有效宽度为-100px，即box2左边溢出100px

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 5][]

## **若box2** float:left + **margin-right：-100px** ##

计算下box2有效宽度= 300px - 100px =200px

也刚好可以填充进container第一行闲置宽度区域，所以会上浮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 6][]

可以发现此时box2上浮后的位置有所不同

这里不同的原因是box2有效区域区域变了，

之前margin-left:-100px，导致box2的左边100px区域无效了。

现在margin-right:-100px，会导致box2的右边100px区域无效。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 7][]

那么当box2继续margin右移，如margin-right：-200px

box2会逐渐移出container吗？

不会，因为box2还有float:left控制，即box2会不停的向左浮动，将container第一行闲置宽度区域占据，即不停给box2的有效宽度自动加值，但是最大只能加到第一行闲置有限宽度大小。

而 box2 float:left + margin-left:-200px

因为box2是左浮动，所以不影响margin-left负数值，即不影响左移

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210712213914368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210712215357885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210712222119999.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210712222449573.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210712220755360.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210712221215902.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210712222936641.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210712223613134.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FmY18xMjgyMjA=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关清除浮动-双伪元素清除浮动（HTML、CSS）

清除浮动-双伪元素清除浮动（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

谁践踏了优雅/ 2023年10月03日 13:24/ 0 赞/ 9 阅读

相关 CSS - 浮动元素的margin-left和margin-right

marigin-left和margin-right理解 margin-left：“盒子”元素的左外边距，当属性值增大，元素表现为向右移动，该属性值减少，元素表现为向左移动

左手的ㄟ右手/ 2023年10月03日 10:49/ 0 赞/ 20 阅读

相关 CSS-什么是标准文档流，元素的浮动，浮动元素的特点

在以前浮动多来控制图片，实现文字环绕图片的效果（字围效果）；现在主要利用浮动的特性（脱离标准文档流）来实现页面的布局标准文档流元素在排版布局过程中会默认自动从

Bertha 。/ 2023年06月02日 09:30/ 0 赞/ 26 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 300 阅读

相关 CSS的clear去除清除浮动元素

clear 属性规定元素的哪一侧不允许其他浮动元素 <table> <tbody> <tr> <td>left</td> <td>在左侧不允许浮动元

逃离我推掉我的手/ 2022年10月26日 03:47/ 0 赞/ 170 阅读

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

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

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

相关 css定位和浮动

1.static定位默认的定位方式，元素出现在正常的流中。静态定位不会受到top，bottom，left，right影响。 2.fixed定位元素的位置相对于浏

Bertha 。/ 2022年09月21日 05:35/ 0 赞/ 202 阅读

相关探讨CSS中元素浮动后，文字环绕于浮动元素周围，没有与浮动元素重合的问题

问题 <html> <head> <meta http-equiv="content-type" content="text/html; cha

女爷i/ 2022年06月12日 04:16/ 0 赞/ 482 阅读

相关 CSS摘要学习-浮动和清除浮动

float 浮动语法值形式化语法浮动元素是如何定位的

秒速五厘米/ 2022年05月23日 04:25/ 0 赞/ 271 阅读

相关 css 浮动元素居中

方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2021年09月20日 10:48/ 0 赞/ 414 阅读