float包裹和崩塌

最新推荐文章于 2024-08-08 15:02:59 发布

weixin_46042888

最新推荐文章于 2024-08-08 15:02:59 发布

阅读量89

点赞数

文章标签： css

原文链接：https://blog.csdn.net/lk3357/article/details/107894285

版权

本文介绍了HTML中的浮動（float）属性如何影响元素布局，导致父级盒子的“崩塌”现象，以及如何通过设置浮动实现文字包裹图片的效果。示例代码展示了不同情况下子元素对父元素的影响，强调了理解布局原理对于前端开发的重要性。

摘要由CSDN通过智能技术生成

崩塌效果：
当父级盒子没有设置宽高范围时，父级盒子的范围会随着子级范围而被撑开
当父级盒子设有宽高范围时，会对子级范围进行约束
当子级元素全部设置浮动，而父级没有宽高范围时，父级崩塌

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>崩塌</title>
  <style type="text/css">
    /*父级盒子模型的状态*/
    div{
      border:solid;
      background-color:yellow;
    }
    /*第一个子级盒子模型的状态*/
    #div1{
      background-color:red;
            height:150px;
            width:150px;
      float:left;
    }
    /*第二个子级盒子模型的状态*/
    #div2{
      background-color:blue;
            height:300px;
            width:300px;
      float:left;
    }
  </style>
</head>
<body>
  <div>
    <div id="div1"></div>
    <div id="div2"></div>
  </div>
</body>
</html>

在这里插入图片描述

包裹（文字包裹图片效果）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>包裹</title>
  <style type="text/css">
    /*所有盒子模型的外边距为0px，外侧盒子设置浮动*/
    *{margin:0px;}
    #id1{
      background-color:blue;
      float:left;
    }
        /*图片大小并与父级盒子底端对齐*/
    img{
      height:230px;
      width:300px;
      vertical-align:bottom;
    }
    /*段落调整*/
    p{
      margin-top:-10px;
      line-height:2em;
    }
  </style>
</head>
<body>
  <div id="id1">
    <!-- 内容 -->
    <img src="1.jpg">
  </div>
  <p>
        他看起来总是这么滑稽，无论做什么，似乎都和这北京城格格不入。明明是个男儿身，却总爱描眉画眼，做一副女子的打扮；若是这样也就罢了，可偏偏他年过六十，是个不折不扣的花甲老人，做这副打扮，确实滑稽可笑。他是这梨园里的长工，学童们都说他没有名字，只是因为他喜欢唱那凄惨的《牡丹亭》，所以梨园里的人叫他老杜。我去梨园那日，正好遇上他穿着那身有些年头的湘妃色戏服，裙摆弯出的褶皱似春风吹动湖面，他捻起兰花指，素手轻扬，莲步轻移，掐着嗓子唱着那首令人魂牵梦萦的《牡丹亭》。我看着他，颇有些愤懑与不平，我想不明白为何那样光鲜亮丽的杜丽娘变成了如今这副模样，我想不明白为何一个从元朝就开始的剧种会被一个撑死四百年的新剧种给代替了。他侧身转头时看见了我，也看见了我眼中的惊艳。小心翼翼的撩起戏服在我身旁坐下，他扯着嗓子问道：“怎么？你想学？”我笑着回答他，“是啊，我想学。”我想学一学这咿咿呀呀，九曲回肠的昆曲儿；想学一学这被世人称作无病呻吟的剧种。他拨弄着戏服上的璎珞，状似随意的问道：“为什么不去学京剧，那……可是国粹啊！”我站起身，轻轻的拍着落在身上的叶子，漫不经心的说：“我嘛……我品不来那《霸王别姬》的铿锵英雄气概。”他看起来总是这么滑稽，无论做什么，似乎都和这北京城格格不入。明明是个男儿身，却总爱描眉画眼，做一副女子的打扮；若是这样也就罢了，可偏偏他年过六十，是个不折不扣的花甲老人，做这副打扮，确实滑稽可笑。他是这梨园里的长工，学童们都说他没有名字，只是因为他喜欢唱那凄惨的《牡丹亭》，所以梨园里的人叫他老杜。我去梨园那日，正好遇上他穿着那身有些年头的湘妃色戏服，裙摆弯出的褶皱似春风吹动湖面，他捻起兰花指，素手轻扬，莲步轻移，掐着嗓子唱着那首令人魂牵梦萦的《牡丹亭》。我看着他，颇有些愤懑与不平，我想不明白为何那样光鲜亮丽的杜丽娘变成了如今这副模样，我想不明白为何一个从元朝就开始的剧种会被一个撑死四百年的新剧种给代替了。他侧身转头时看见了我，也看见了我眼中的惊艳。小心翼翼的撩起戏服在我身旁坐下，他扯着嗓子问道：“怎么？你想学？”我笑着回答他，“是啊，我想学。”我想学一学这咿咿呀呀，九曲回肠的昆曲儿；想学一学这被世人称作无病呻吟的剧种。他拨弄着戏服上的璎珞，状似随意的问道：“为什么不去学京剧，那……可是国粹啊！”我站起身，轻轻的拍着落在身上的叶子，漫不经心的说：“我嘛……我品不来那《霸王别姬》的铿锵英雄气概。”
    </p>
</body>
</html>

在这里插入图片描述

版权声明：本文为CSDN博主「lk3357」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lk3357/article/details/107894285

weixin_46042888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
float包裹和崩塌

崩塌效果：当父级盒子没有设置宽高范围时，父级盒子的范围会随着子级范围而被撑开当父级盒子设有宽高范围时，会对子级范围进行约束当子级元素全部设置浮动，而父级没有宽高范围时，父级崩塌<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>崩塌</title> <style type="text/css"> /*父级盒子模
复制链接

扫一扫