暑期实践——7.27

最新推荐文章于 2024-07-20 18:16:53 发布

YY__111

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量25

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/YY__111/article/details/131988327

版权

八、浮动与清除浮动

浮动（float）是使用率较高的一种定位方式。有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动属性使盒子在浮动方式下定位。

1、浮动

浮动元素可以向左或向右移动，直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边缘为止。float属性定义元素在哪个方向浮动，任何元素都可以浮动，浮动元素会变成一个块级元素。

语法：

float : none | left | right

参数：

none为对象不浮动，left为对象浮在左边，right为对象浮在右边。

案例

向右浮动的元素

<html>
<head>
<title>向右浮动</title>
   <style type="text/css">
       body{
           margin: 15px;
           font-family: Arial; font-size: 12px;
       }
       .father{
           background-color: #ffff99;
           border: 1px solid#111111;
           padding: 5px;
       }
       .father div{
           padding: 10px;
           margin: 15px;
           border: 1px dashed#111111;
           background-color: #90baff;
       }
       .father p{
           border: 1px dashed#111111;
           background-color: #ff90ba;
       }
       .son_one{
           width: 100px;
           height: 100px;
           float: right;
       }
       .son_two{
           width: 100px;
           height: 100px;
       }
       .son_three{
           width: 100px;
           height: 100px;
       }
   </style>
</head>

<body>
   <div class="father">
       <div class="son_one">盒子1</div>
       <div class="son_two">盒子2</div>
       <div class="son_three">盒子3</div>
       <p>这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里。浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字。</p>
</div>
</body>
</html>

向左浮动的元素

<html>
<head>
<meta charset="utf-8">
<title>向左浮动</title>
   <style type="text/css">
       body{
           margin: 15px;
           font-family: Arial; font-size: 12px;
       }
       .father{
           background-color: #ffff99;
           border: 1px solid#111111;
           padding: 5px;
       }
       .father div{
           padding: 10px;
           margin: 15px;
           border: 1px dashed#111111;
           background-color: #90baff;
       }
       .father p{
           border: 1px dashed#111111;
           background-color: #ff90ba;
       }
       .son_one{
           width: 100px;
           height: 100px;
           float: left;
       }
       .son_two{
           width: 100px;
           height: 100px;
           float: left;
       }
       .son_three{
           width: 100px;
           height: 100px;
           float: left;
       }
   </style>
</head>

<body>
   <div class="father">
       <div class="son_one">盒子1</div>
       <div class="son_two">盒子2</div>
       <div class="son_three">盒子3</div>
       <p>这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里。浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字，这里是浮动框外围的演示文字。</p>
</div>
</body>
</html>

父容器空间不够时的元素浮动

<html>
<head>
<meta charset="utf-8">
<title>父容器空间不够的元素浮动</title>
   <style type="text/css">
       body{
           margin: 15px;
           font-family: Arial; font-size: 12px;
       }
       .father{
           background-color: #ffff99;
           border: 1px solid#111111;
           padding: 5px;
           width: 330px;
           float: left
       }
       .father div{
           padding: 10px;
           margin: 15px;
           border: 1px dashed#111111;
           background-color: #90baff;
       }
       .son_one{
           width: 100px;
           height: 150px;
           float: left;
       }
       .son_two{
           width: 100px;
           height: 100px;
           float: left;
       }
       .son_three{
           width: 100px;
           height: 100px;
           float: left;
       }
   </style>
</head>

<body>
   <div class="father">
       <div class="son_one">盒子1</div>
       <div class="son_two">盒子2</div>
       <div class="son_three">盒子3</div>
</div>
</body>
</html>