13.浮动：给子集加浮动父级的文字会被排挤出去；同样的效果兄弟集也一样试用！

咖喱鸡块

于 2016-07-21 19:40:09 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：浮动父级文字排挤

本文链接：https://blog.youkuaiyun.com/hh279768876/article/details/51985935

css 专栏收录该内容

35 篇文章

订阅专栏

本文通过一个具体的HTML与CSS示例介绍了浮动布局的基本概念及其对父级及兄弟元素的影响。示例中展示了如何设置不同元素的宽度、高度及背景颜色，并通过浮动属性实现特定的布局效果。

浮动：给子集加浮动父级也会浮动，

父级的文字也会被排挤出去；

同样的效果兄弟集也一样试用！

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       #box0 {
           height:30px;
           background: green;
       }
       #box1 {
           width:200px;
           background: red;
           border:1px solid red;
           height: 200px;
       }

       #box2 {
           width:150px;
           height:100px;
           background: yellow;
           float:left;
       }
       #c{
           width: 100px;
           height: 100px;
           background: blue;
       }

   </style>
</head>
<body>
   <div id="box0"></div>
   <div id="box1">div1
       <div id="box2">div</div>
   <div id="c"></div>
   </div>
</body>
</html>