css属性float和定位

标准流

1. 块独占一行
2. 行内元素多个可以占一行

浮动float

1. 设置 left right
2. 特性
   • 可以让块元素在一行显示
   • 设置浮动后会脱离标准流(脱标) 在一行显示
   • 可以实现模式转换
   • 设置了浮动后
     • 该元素会影响后面的元素
     • 设置了浮动的元素不占位置导致的
   • 注意
     • 让块元素在一行显示，就使用浮动
     • 实现模式转换 要使用display -作用 -实现文字环绕图片(包裹性)2.文字不受浮动的影响 -制作网页导航 导航使用ul li -网页布局
3. 清除浮动
   • 必要条件
     • 父盒子没有固定高度
     • 父盒子中的所有盒子都设置了浮动
   • 清除浮动 -指的是清除浮动对页面布局造成的影响
   • 清除浮动的必要条件
     • 父盒子没有固定高度
     • 父盒子中的所有子盒子都设置了浮动
   • 清除浮动的方式
     • 方式一

       • clear:left

         right

         both

     • 方式二
       • 给没有高度的父元素设置overflow:hidden
       • 注意
         • 如果父元素中有定位的元素，最好不要使用overflow:hidden
     • 方式三
       • 使用伪元素清除浮动

.clearfix:after{
			content: "";
			height: 0;
			line-height: 0;
			clear: both;
			display: block;
			visibility: hidden;
}
.clearfix{
		zoom: 1;
}

4.overflow

• visible 默认值[超出部分显示]
• hidden 超出部分隐藏
• scroll 添加滚动条
• auto 根据内容自动是否设置滚动条

5.定位

• 定位[重点]
  • 体现元素之间的层级关系
  • 定位作用
    • 使用定位的方式实现移动元素
• 分类
  • 静态定位 static
  • 绝对定位
  • 相对定位
  • 固定定位
• 定位详解

  • 静态定位static left

    right

    top

    bootom

  • 静态定位===>标准流下元素的显示方式
  • 静态定位不能实现移动元素位置
• 绝对定位
  • position:absolute 绝对定位的元素
  • 绝对定位的元素定位特点
    • 1.父元素没设置定位，则以浏览器body左上角为基准设置定位
    • 1.父元素设置了除static的定位，则以父元素的位置为准
  • 特性
    • 绝对定位的元素不占位置
    • 绝对定位的元素脱离标准流
    • 绝对定位可以实现模式转化
  • 使用特点:
    • 盒子压盒子的效果
• 相对定位
  • position:relative
  • 特点
    • 设置了相对定位的元素只能以相对自己位置设置定位
    • 相对定位的元素没有脱离标准流，占位置
    • 相对定位不能实现元素的模式转换
    • 经常使用的是 子绝父相
• 固定定位
  • position：fixed
  • 特性
    • 固定定位的元素只看浏览器左上角为基准设置定位
    • 固定定位的元素脱离标准流不占位置
    • 固定定位可以实现模式转换