Python HTML和CSS 8：浮动布局

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

一、浮动

• 1.1、浮动特性

  • <1>、浮动元素有左浮动(float:left)和右浮动(float:right)两种

    
    
    浮动元素有左浮动(float:left)和右浮动(float:right)两种

    
    
    
        
        
        
    
    
       
    
          左浮动
          右浮动
       
    
    
    

  • <2>、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来

  • <3>、相邻浮动的块元素可以并在一行，超出父级宽度就换行

  • <4>、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)

  • <5>、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

  • <6>、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动

  • <7>、浮动元素之间没有垂直margin的合并

二、用列表制作表单

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

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

  
  
  效果图

  
  
  
     
     
     
  
   
       
  
           
  首页
           
  公司简介
           
  解决方案
           
  公司新闻
           
  行业动态
           
  招贤纳才
           
  联系我们
       
  
  
  

三、清除浮动

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

  
  
  bug图

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

  
  
  
      
      
      
  
  
       
  
           
  1
           
  2
           
  3
           
  4
           
  5
           
  6
           
  7
           
  8
       
  
  
  

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

    
    
    正常的情况是

• 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（不推荐）

    
       
    1
       
    2
       
    3
       
    4
       
    5
       
    6
       
    7
       
    8
       
       
    
    
    

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

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