慕课网学习笔记----《网页布局基础》—浮动布局和float属性

最新推荐文章于 2022-03-04 15:35:40 发布

panlu666_pl

最新推荐文章于 2022-03-04 15:35:40 发布

阅读量425

点赞数 1

分类专栏：慕课网学习笔记文章标签：清除浮动

本文链接：https://blog.csdn.net/panlu666_pl/article/details/65938798

版权

慕课网学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浮动布局


<html>
<head>
  <meta charset="utf-8">
  <title>浮动</title>
  <style type="text/css">
       .box1{
             height:50px;
             background-color:red;
             }
       .box2{
             height:50px;
             background-color:blue;
             }
  </style>
</head>
<body>
      <div class="box1"></div>
      <div class="box2"></div>
</body>
</html>

这里写图片描述

以上为两个基本的div

此时给box1加一个向左浮动：

.box1{
      height:50px;
      background-color:red;
      float:left;
      }

此时结果如下图：
这里写图片描述

此时，红色box1不见了

原因：box1里面没有内容，且没有设置宽度，当设置浮动时，尺寸得不到扩展，会缩成一个小圆点，出现在浏览器左上角。

这时候我们给box1填充内容，再来看看效果

 <div class="box1">这里是box1，哈哈哈哈哈哈哈</div>

这里写图片描述

当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。

清除浮动

当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素特指紧邻后面的元素，所以有时需要用到清除浮动的方法。

例如. 给box2填充内容：

<div class="box2">这里是box2，哈哈哈哈哈哈哈</div>

给box2增添一句向左浮动的代码：

 .box2{
             height:50px;
             background-color:blue;
             float:left;
             }

此时效果如下图：
这里写图片描述

在box2的div后增添一个p标签，填充内容：

<p>这里是box2后面的一个段落，紧邻在box2后面，是box2的相邻元素</p>

此时效果如下图：
这里写图片描述

此时因为p元素为box2的相邻元素，由于box2向左浮动，故对p元素产生了影响。所以现在需要清除浮动，达到p元素在box2下面，独占一行的效果。

清除浮动的方法：

给需要清除浮动的元素增添属性值：clear:left;/right;/both;
即为不允许左侧/右侧/两边有浮动对象。

注意：这个规则只能影响使用清除的元素本身，不能影响其他元素。
同时设置
1).width:100%;（或固定宽度）
2).overflow:hidden;

此时来试试清除浮动的方法
1）.给p元素增添属性值，达到清除浮动的目的：

p{
clear:left;
}

使用clear:left;指定p元素左边不出现浮动元素，这样p元素被迫下移一行

效果如下图：
这里写图片描述

2）.第二种方法也能达到和第一种方法一样的效果，如上图所示。

p{
width:100%;
overflow:hidden;
}

现在我将所有的代码全部贴上来：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>浮动</title>
  <style type="text/css">
       .box1{
             height:50px;
             background-color:red;
             float:left;
             }
       .box2{
             height:50px;
             background-color:blue;
             float:left;
             }
        p{
        clear:left;  /*清除浮动方法一*/
        /*width:100%;   
        overflow:hidden;*//*清除浮动方法二*/
         }
  </style>
</head>
<body>
      <div class="box1">这里是box1，哈哈哈哈哈哈哈</div>
      <div class="box2">这里是box2，哈哈哈哈哈哈哈</div>
      <p>这里是box2后面的一个段落，紧邻在box2后面，是box2的相邻元素</p>
</body>
</html>