浮动和清除浮动

最新推荐文章于 2024-11-08 15:41:32 发布

Dyan GONG

最新推荐文章于 2024-11-08 15:41:32 发布

阅读量222

点赞数 2

分类专栏： CSS 文章标签：前端

本文链接：https://blog.csdn.net/DavidsonGong/article/details/140577060

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

<!-- 教程楼层 结束 -->
  <!-- 浮动和清除浮动 -->
  <!-- 没设置bfc overflow:hidden, 未浮动元素撑起父元素 -->
  <view class="div1">
    <!-- <text>一段文字</text> -->
    <view class="div2">div2</view>
  </view>
  <!-- 浮动后,后面文字都跟着环绕排列 -->
  <text>一段文字</text>
  <text>一段文字</text>
  <!-- view独占一行, text不会独占一行,是内联袁术 -->
  <view>另一段文字</view>
  <view>另一段文字</view>
  <view>另一段文字</view>
</view>

less部分

// 清除浮动
.div1 {
  width: 200rpx;
  // height: 200rpx;
  border: 1px solid red;  //方法一 bfc
  // overflow: hidden;
  // 方法二 只设置高, 不生效
  // height: 100rpx;
  overflow: hidden;
  .div2 {
    float: left;
    width: 100rpx;
    height: 100rpx;
    background-color: aquamarine;
  }
}