前端3+1-8

bleach777

于 2021-07-12 19:58:18 发布

阅读量43

点赞数

分类专栏：前端3+1

本文链接：https://blog.csdn.net/a037777777/article/details/118682567

版权

前端3+1 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

html

同day4一样

css

题目：清除浮动的方式有哪些，原理是啥，有啥优缺点
答案：
ps：为啥要清除浮动：子元素浮动后，脱离文档流，不再被父元素包裹，故父元素高度坍塌，无法由子元素撑开
1、手动给父元素要给高度；兼容性好，但自适应差；
2、触发父元素BFC，让内层子元素不影响外层父元素样式
给父元素：overflow: auto;
可能会出现滚动条
2、新增一个空元素清除浮动
新增了冗余的元素

<!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>
    .box {
      padding: 10px 10px;
      background-color: yellowgreen;
    }

    .item {
      float: left;
      width: 10px;
      height: 10px;
      background-color: blue;
      list-style: none;
    }
    // 重点
    .clear-item {
      clear: both;
    }
  </style>
</head>

<body>
  <ul class="box">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <!-- 重点 -->
    <div class="clear-item"></div>
  </ul>
</body>

</html>

3、使用after伪元素清除浮动
低版本IE不兼容

<!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>
    .box {
      padding: 10px 10px;
      background-color: yellowgreen;
    }

    .item {
      float: left;
      width: 10px;
      height: 10px;
      background-color: blue;
      list-style: none;
    }
    // 重点
    .box::after {
      content: '';
      display: block;
      clear: both;
    }
  </style>
</head>

<body>
  <ul class="box">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</body>

</html>

bleach777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端3+1-8

html同day4一样css题目：清除浮动的方式有哪些，原理是啥，有啥优缺点答案：ps：为啥要清除浮动：子元素浮动后，脱离文档流，不再被父元素包裹，故父元素高度坍塌，无法由子元素撑开1、手动给父元素要给高度；兼容性好，但自适应差；2、触发父元素BFC，让内层子元素不影响外层父元素样式给父元素：overflow: auto;可能会出现滚动条2、新增一个空元素清除浮动新增了冗余的元素<!DOCTYPE html><html lang="en"><hea
复制链接

扫一扫