Python HTML和CSS 8：浮动布局

总体内容
1、浮动
2、使用浮动优化上一篇博客列表制作表单
3、清除浮动

一、浮动

1.1、浮动特性
- <1>、浮动元素有左浮动(float:left)和右浮动(float:right)两种
  
  浮动元素有左浮动(float:left)和右浮动(float:right)两种
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两端对齐浮动</title>
    <style type="text/css">
        .box1{
           width: 200px;
           height: 100px;
           background-color: yellow;
        }
        .box1 .a1{
           background-color: red;
           float: left;
        }
        .box1 .a2{
           background-color: brown;
           float: right;
        }
     </style>
</head>
<body>
   <div class="box1">
      <a class="a1">左浮动</a>
      <a class="a2">右浮动</a>
   </div>
</body>
</html>
```
- <2>、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来
- <3>、相邻浮动的块元素可以并在一行，超出父级宽度就换行
- <4>、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)
- <5>、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
- <6>、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
- <7>、浮动元素之间没有垂直margin的合并

二、用列表制作表单

2.1、思路分析：上篇博客我们采用的是div套a标签的方式，这样的做法有点不正规，这里采用 ul套li,li套a标签的方式,这样是比较规范的一种方式

2.2、具体的效果以及代码如下

效果图

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>用列表制作表单</title>
   <style type="text/css">

       .menu{
          width: 694px;
          height: 50px;
          /*background-color: aqua;*/
          /* 去除小圆点 */
          list-style: none;
          /* 自定义 margin */
          margin: 50px auto;
          /* 去掉padding */
          padding: 0px;
        }

        .menu li{
           width: 98px;
           height: 48px;
           border: 1px solid gold;
           /* 去除子标签之间的间隙 */
           float: left;
           /* 合并 1px的距离 */
           margin-left: -1px;
        }

        .menu li a{
           background-color: white;
           display: block;
           line-height: 48px;
           /* 控件居中显示 */
           text-align: center;
           color: pink;
           /* 去除下划线 */
           text-decoration: none;
           font-size: 16px;
           font-family: "Microsoft YaHei";
         }

        .menu li a:hover{
            background-color: gold;
            color: white;
        }

        </style>
</head>
<body> 
     <ul class="menu">
         <li><a href="">首页</a></li>
         <li><a href="">公司简介</a></li>
         <li><a href="">解决方案</a></li>
         <li><a href="">公司新闻</a></li>
         <li><a href="">行业动态</a></li>
         <li><a href="">招贤纳才</a></li>
         <li><a href="">联系我们</a></li>
     </ul>
</body>
</html>

三、清除浮动

3.1、我们先看一个问题：父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动，如下

bug图

提示出现这种情况是：子元素给了浮动，父视图没有给 height, 这种情况会出现父视图撑不开的现象，这样的情况下父视图需要清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style type="text/css">
       .list{
           width: 210px;
           border: 1px solid #000000;
           margin: 50px auto;
           list-style: none;
           padding: 0px;
       }

       .list li{
           width: 50px;
           height: 50px;
           background-color: gold;
           margin: 10px;
           float: left;
       }
     </style>
</head>
<body>
     <ul class="list">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>8</li>
     </ul>
</body>
</html>

正常的情况是：父级盒子不给高度，子集盒子浮动，父级盒子需要清除浮动

正常的情况是

3.2、清除浮动的解决办法

解决办法一：父级上增加属性overflow：hidden

.list{
    width: 210px;
    border: 1px solid #000000;
    margin: 50px auto;
    list-style: none;
    padding: 0px;
    /* 父级上增加属性overflow：hidden */
    overflow: hidden;
}

解决办法二：在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）

<ul class="list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <!--第 2 种解决办法: 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）-->
   <div style="clear: both"></div>
</ul>

解决办法三：使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{
     content: "";display: table;
}
.clearfix:after{
     clear:both;
}
/* 用来兼容IE */
.clearfix{
     /* zoom：缩放网页 1：不放大，也不缩小 解决IE浮动的问题 */
    zoom:1;
}

Python HTML和CSS 8：浮动布局

推荐阅读更多精彩内容