CSS布局与浮动详解-优快云博客

本文链接：https://blog.youkuaiyun.com/yuemitengfeng/article/details/79744903

本文详细介绍了CSS中静态、相对、绝对定位的概念及应用，并深入探讨了浮动属性如何实现元素的横向排列，解决了图文混排等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position

参考博客
1、static
默认的，顺序码放
2、reactive
对于当前位置（static位置）的浮动，使用top，right，bottom，left改变自身位置，改变后点击范围随自身改变，不改变位置时效果同static

 #div-1a{
     background-color: #d33; 
     color: #fff;
     position: relative;
     top:-5px;
     left:-10px;
}

这里写图片描述
3、absolute
在一篇博客的介绍中如此写道
absolute是position中的第三个属性值，如果你给元素指定了absolute，整个元素就会漂出文档流，而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

设置后可以看到，div-1a在它父亲的区域里成为

 #div-1a{
     background-color: #d33; color: #fff;
     position: absolute;
}

这里写图片描述
而我又做了个实验，把1a恢复static之后把1b变成absolute，结果如下

所以我想补充一下默认状况下变成absolute的块只会从文档流的原处提出，它的原位置被后续块占据，但absolue块宽度超过浏览器的会折行，没有超过的只能显示自己的最长宽度。
而在设置top:0; right:0;之后它才会飘到页面的指定位置，补充一下
top:0; bottom: 0; left:0; right:0;当你这样设置时他就全屏了，只设置 left:0; right:0;他就宽度随页面变化了
所以还要引用一句话
一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。

float

这个东西好用是因为可以让一行显示多个div
这个东西不好用是因为元素浮动之后他的父元素是不拉伸的
而且只要你用了这玩意又不打算瀑布流那你还得clear
所以为了避免我自己忘记，有了这篇博客，参考的还是上面那个博主的系列文章
float主要解决我们图文混排的痛点，同时解决用absolute和reactive做起来丑陋/根本做不到的事。
1、浮动
浮动这个东西有right和left两个选项

#div-1a{
    background-color: #d33; color: #fff;
    float: left;
    width: 50%;
    }
#div-1b{
    background-color: #3d3; color: #fff;
    float: right;
    width: 50%;
}
#div-1c{
    clear: both;
    background-color: #33d; color: #fff;
}

这里写图片描述
当div-1b也为left时显示如下

然后我做了个小实验，把1a，1b的float都设置为left，调整块的顺序查看他们

可以看出来都为left时块会按照顺序展示，同时下层块会跟随距离自己最近的高度最短的块。

之后我把1b设置成right，同时增加了颜色不同的1d，结果1b在最右边，1d在1b的左侧，可见都为right时也有一定顺序
这里写图片描述

这说明浮动就意味着脱离了文档流，直到clear为止

然后就说到了图文混排
你在一个div中设置一个浮动为left的image后这个div中的p会自动填补图片的空缺，因为这一类属性是行内元素
需要注意，浏览器默认解析英文和数字时按照单词进行解析，单词过长时会超出div显示，需要设置word-break: break-all;强制换行
或者设置word-wrap : break-word ;允许长单词换行到下一行。
这里还要说一下两个的区别：word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
然后我找了篇帖子参看这里
在原文基础上我做了一些测试然后确定了下面这套图文混排

.div-1d{
    background-color: #d0e9c6;color: #0d0d0d;
    width: 100%;
    position: relative;
}
.div-1d img{
    width: 30%;
    height: 150px;
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
}
#l{
    display: block;
    width: 45%;
    float: left;
}
#r{
    display: block;
    width: 45%;
    float: right;
}
#l:before, #r:before {
    content: "";
    width: 30%;
    height: 150px;
}
#l:before { float: right; }
#r:before { float: left; }

使用伪元素时需要注意，伪元素的宽度是根据元素的宽度来的，也就是说width: 30%;是参照width: 45%;的30%。
然后经过测次实验才确定45%这个比率，当其为46%及其以上时在chrome最小宽度下会折叠。
这里写图片描述

先说一下清除
1、div clear

 .clear {
    clear:both;/*主要使用这个属性来清除浮动*/
    /*为了不让ie具有一定的空间，个人建议加上下面三个属性*/
    height: 0;
    line-height: 0;
    font-size: 0;
  }
<div class="clear"> </div>

2、overflow
在浮动的元素上加属性

.A {
    overflow: auto;/*除ＩＥ6以及其以下版本不识别之外，其他浏览器都识别*/
    zoom: 1;/*在ＩＥ下触发其layout，也要以使用_height:1%来代替zoom*/
  }
  * html .A {
      height: 1%; /* IE5-6 */
   }

A 为浮动块，有适配问题

3、clearfix方法

  .clearfix:before,
  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
  }
  .clearfix:after {clear: both;}
  .clearfix {zoom: 1;} /* IE < 8 */