flota定义元素在哪个方向浮动,常用的属性有left和right,在此记录下flota需要学习的知识点.

float设置之后的效果

  • 脱离文档流,向左或向右移动,直到碰到父容器的边界或另一个浮动元素
  • 块级元素会忽略float元素,文本和行内元素会环绕它,最初是实现文字环绕的功能

注意点

1. 高度塌陷

一般来说,当父元素没有显示的设置宽和高时,父元素的高度是随着子元素的高度而变化.但如果所有的子元素被设置成浮动属性后,父元素的宽和高是不会变化的.

解决此问题的方法便是:

  1. 在其后添加额外的标签,显示声明clear:both属性
  2. 给父元素设置overflow:hidden属性

  3. 使用after伪元素(本质是在末尾添加一个看不见的块元素)

    2. 浮动元素会脱离文档流

  4. 处于文档流中的块级元素是无法感知到浮动元素的存在.

  5. 根据第一点,设置第一个子元素为左浮动,那么第二个紧接着的块级元素会当第一个元素不存在

网页布局

网页在整体上主要分为头部&主体&尾部&侧边栏四个部分.

  1. 对于并列的主体和侧边栏该如何设置?

image.png

  • 方法1: 设置两个div的display为inline-block,同时记得在这两个的父容器中设置font-size=0消除div之间的距离
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>layout例子</title>
  5.     <style type="text/css">
  6.         .container {
  7.             /*消除间距的设置*/
  8.             font-size: 0;
  9.         }
  10.         /*设置两个div在同一个版块中展示*/
  11.         .left, .right {
  12.             display: inline-block;
  13.         }
  14.         .left {
  15.             width: 100px;
  16.             height: 150px;
  17.             background-color: #FFB5BF;
  18.         }
  19.         .right {
  20.             height: 150px;
  21.             background-color: #94E8FF;
  22.             /*设置右边版块的宽度
  23.                 1. calc(100%)表示父容器的整个宽度
  24.           2. 减去100px表示
  25.             */
  26.             width: calc(100% - 100px); 
  27.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div class="container">
  33.         <div class="left">left</div>
  34.         <div class="right">right</div>
  35.     </div>
  36. </body>
  37. </html>
  • 方法2: 使用float.
    • 设置第一个块级元素为左浮动,第二个块级元素会认为没有第一个块级元素,此时第二个块级元素的宽度为100%(默认为父元素的宽度),设置第二个元素的左外边距为第一个块级元素的宽度,同时设置父元素overflow:hidden清除浮动
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>layout例子</title>
    <style type="text/css">
        .container {
            /*清除浮动*/
            overflow: hidden;
        }
        .left {
            width: 100px;
            height: 150px;
            background-color: #FFB5BF;
            float: left;
        }
        .right {
            height: 150px;
            background-color: #94E8FF;
            margin-left: 100px; 
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

  - 同时设置两个元素版块为左浮动,计算