【CSS】float属性与display属性的结合使用

最新推荐文章于 2024-12-25 14:58:16 发布

CCC0203

最新推荐文章于 2024-12-25 14:58:16 发布

阅读量1.9k

点赞数 1

分类专栏： CSS 文章标签： css 定位

本文链接：https://blog.youkuaiyun.com/CCC0203/article/details/114499511

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

基础知识

本人基础不牢，写之前先把基础过一下嘻嘻。。

float

浮动，指让某个元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

假如某个div元素A是浮动的，如果A的上一个元素也是浮动的，那么它跟在上一个元素（浮动元素）之后排列；如果它的上一个元素是标准流元素，那么A的顶部和上一个元素（标准流元素）的底部对齐。

清除浮动

语法：

clear: none | left | right | both

取值：

none: 默认值。允许两遍都可以有浮动对象。

left: 不允许左边有浮动对象。

right: 不允许右边有浮动对象。

both: 不允许有浮动对象。

比如两个浮动对象A和B均设置为float: left;，这时AB左右同行排列，想要让B在A的下方时，对B设置clear: left;清除浮动即可。

position

MDN：

CSS position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。脱离正常流

MDN：

不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margin），且不会与其他边距合并。

relative

生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的left位置添加 20 像素。

MDN：

该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

MDN：

不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

sticky

MDN：

盒位置根据正常流计算（这称为正常流动中的位置），然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为table时），该元素均不对后续元素造成影响。当元素B被粘性定位时，后续元素的位置仍按照B未定位的位置来确定。position: sticky对table元素的效果与position: relative相同。

inherit

规定应该从父元素继承 position 属性的值。

float与display结合使用

终于到正文了。。。

两者是没有冲突的，反而可以结合使用，让元素既漂浮在文档之上又产生位移。float是将元素脱离标准流，浮动在文档之上；display使元素产生相对移动。

在此努力写个例子：

<body>
  <div class="d1">div1</div>
  <div class="d2">div2</div>
</body>

当只有float的时候：

  .d1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .d2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: sandybrown;
  }

效果：

为div1设置display:relative以及left:300px，div1向右偏移300px，而正常位置还在：

  .d1 {
    float: left;
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 300px;
  }

  .d2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: sandybrown;
  }

效果：

要是把div1设成display: absolute的话。。。

  .d1 {
    float: left;
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    left: 300px;
  }

  .d2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: sandybrown;
  }

效果：