美文网首页
浮动小例: 标签先后顺序 影响浮动

浮动小例: 标签先后顺序 影响浮动

作者: 奔云 | 来源:发表于2019-10-26 09:50 被阅读0次

我们知道 前端都是分为 html css JavaScript,这是因为 他们各自都有不同的 书写语法,

但是 随着悠久的网络发展史, 个人觉得 它们的内部早就已经产生千丝万缕的“勾结”,

比如这个例子:

<!-- html -->
  <div class="wrap">
    <aside class="left">left</aside>
    <aside class="right">right</aside>
    <main>main</main>
  </div>
/* css */
.wrap {
  width: calc(50%);
  height: 500px;
  background: #ddd;
}
.left {
  width: calc(15%);
  height: calc(20%);
  background: red;
  float: left;
}
.right {
  width: calc(15%);
  height: calc(30%);
  background: green;
  float: right;
}
main {
  min-width: 200px;
  margin: 0 calc( 15.8%);
  height: calc(70%);
  background: orange;
}

他呈现的画面是:

Snipaste_2019-10-26_09-53-02.png

而 只要在上面代码 调换一下 .right 和 main 的 位置,css不变 如:

<!-- html -->
  <div class="wrap">
    <aside class="left">left</aside>
    <main>main</main>
    <aside class="right">right</aside>
  </div>

就会呈现下面这种情况:

Snipaste_2019-10-26_09-52-45.png

这是为什么呢?!

相关文章

  • 浮动小例: 标签先后顺序 影响浮动

    我们知道 前端都是分为 html css JavaScript,这是因为 他们各自都有不同的 书写语法, 但是 随...

  • css布局—清除浮动的影响

    浮动存在的问题①浮动的元素不能撑高父亲,高度不能自适应②浮动的元素会影响后面浮动的元素例: 效果: …………………...

  • 浮动元素及清除浮动

    浮动的影响 浮动会使当前标签脱离文档流,产生上浮的效果。 影响父级元素的位置和width,height属性。 遮挡...

  • 如何清除浮动

    为什么清除CSS浮动这么难?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 widt...

  • 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 wid...

  • 浮动的优缺点,如何清除浮动?

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 wid...

  • 清除浮动的方法与优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 wid...

  • css清除浮动的几种方式

    为什么清除浮动? 父级没高度 子盒子浮动了 影响下面布局了,我们就应该清除浮动了。 1. 额外标签法(隔墙法) 优...

  • css_20 padding margin 问题

    1.7小知识(浮动的盒子相互影响) 浮动的盒子千万不要让他超出父盒子。 超出父盒子的部分会影响下面盒子中的浮动的子...

  • 完美clearfix

    clearfix 清除浮动分为两种: 清除自身浮动 清除父级浮动 这里不讲空标签的方法,因为空标签还要额外添加新的...

网友评论

      本文标题:浮动小例: 标签先后顺序 影响浮动

      本文链接:https://www.haomeiwen.com/subject/kqsyvctx.html