美文网首页
flex布局子项中会自动清除浮动,导致高度没坍塌

flex布局子项中会自动清除浮动,导致高度没坍塌

作者: 猪和白菜的关系 | 来源:发表于2020-09-15 18:00 被阅读0次

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .translate {
      width: 600px;
      display: flex;

    }
    .wrap {
      width: 300px;
      background: red;
    }

    .tip {
      float: right;
    }

    .en {
      
    }
  </style>
</head>
<body>
  <div class="translate">
    <div class="wrap">
      <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊哦哦哦哦哦哦哦哦哦哦哦哦你你你你你你你你你你那啊啊啊啊啊啊啊啊啊啊啊啊啊啊哦哦哦哦哦哦哦哦哦哦哦哦你你你你你你你你你你那啊啊啊啊啊啊啊啊啊啊啊啊啊啊哦哦哦哦哦哦哦哦哦哦哦哦你你你你你你你你你你那</div>
      <div class="tip">查看全文</div>
    </div>
    <div class="en">
      中文中文中文中文中文中文中文中文
    </div>
  </div>
</body>
</html>

相关文章

  • flex布局子项中会自动清除浮动,导致高度没坍塌

    代码如下

  • 清除浮动(详解)

    经常会说没有清除浮动的话就会导致高度坍塌,啥是高度坍塌呢?1.什么是高度坍塌?简单来说就是包含有浮动元素的上一级元...

  • 面试题集合-CSS篇

    1.Flex: 概念, 属性, 常用布局 2.解决浮动中高度塌陷: 原因, 解决方案, 方案之间对比 3.清除浮动...

  • 【CSS】清除浮动

    清除浮动详解 清除浮动主要是为了解决由于浮动元素脱离文流导致的元素重叠或者父元素高度坍塌的问题,而这两个问题分别对...

  • div布局浮动与定位,定位 工具包

    &关于浮动定位 定位与浮动 &css3 阴影,变形,圆角,渐变色 自动生成 &Flex布局学习 flex布局 &自...

  • css清除浮动的几种方式

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

  • CSS3弹性布局 flexible boxes

    W3弹性布局: 弹性布局父容器(Flex Containers) 弹性布局子项(Flex Items) 子项于父容...

  • flex布局,子项内容太大

    flex居中布局,但是子项内容太大,超出容器范围,导致子项顶部被遮住,可以对子项添加样式{ margin: aut...

  • 清除浮动

    3.4清除浮动总结 为什么需要清除浮动? 1、父级没有高度2、子盒子浮动了3、影响下面布局了 清除浮动的方式优点缺...

  • Float布局

    .clearfix .浮动会造成父容器高度坍塌,因此要清理浮动。将.clearfix类应用到需要清除浮动的父元素;...

网友评论

      本文标题:flex布局子项中会自动清除浮动,导致高度没坍塌

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