HTML与CSS学习 demo7

HTML与CSS学习

这篇文章主要讲了CSS的浮动部分，主要是有一个学成在线的案例学习到很多开发时的知识
案例请移步学成在线案例
这篇笔记是初学者写下的笔记，如有错误，欢迎指正。

传统网页布局的三种方式

• 标准流(普通流/文档流)：按照默认的方式排列
• 浮动流
• 定位流

CSS浮动

• 浮动可以改变元素标签的默认排列方式

• 网页布局第一准则：多个块级元素横向排列标准流，多个块级元素纵向排列浮动流

浮动详解

• float属性创建浮动框，使其移动到一边，直到左边缘或右边缘碰到另一个浮动框的边缘或父元素边缘

• 代码示例：

  float: none | left | right;
  

值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

浮动特性

1. 浮动的元素会脱离标准流

   • 脱离标准流的控制，移动到指定位置 (俗称脱标)
   • 浮动盒子不会保留原先的位置

   浮动是有浮动属性盒子会飘起来，后面没有浮动属性的盒子补上前面飘起来盒子位置

2. 浮动的元素会一行显示并且元素顶端对齐

   • 浮动元素会紧紧贴在一起 (不会有空隙)
   • 如果父元素宽度装不下这些盒子，多出的盒子会另起一行对齐

   可以这么理解：浮动的高度都是一样的，所以会并排显示

3. 浮动元素会具有行内块元素特性

   • 行内元素添加float属性可以设置宽高
   • 块元素添加float属性可以在一行显示
   • 添加浮动的行内元素和块元素，他的宽度根据内容宽度来确定

约束浮动元素策略

• 先用标准流父元素排列上下位置，之后内部子元素浮动来排列左右位置 (网页布局第一准则)

• 网页布局第二准则：先设置盒子大小，在设置盒子位置

浮动布局的注意点

• 和浏览器一样宽的盒子不需要指定宽度

• 元素浮动后只会影响后面的标准流，不影响之前的标准流

• 一个元素浮动了，其他的兄弟元素都应该浮动

清除浮动

清除浮动的原因

• 有些父级盒子不方便给高度(如比较高的盒子，或者盒子高度要随时改变)，但是又不能不给高度(下面的标准流盒子又会占用父级盒子的位置)

清除浮动的本质

• 清除浮动的本质是清除浮动元素对父级元素的影响

• 父盒子有高度，则不需要清除浮动

• 清除浮动以后，父级元素会自动检测盒子的高度，不会影响下面的标准流元素

• 语法规范：

div {
   
    clear: left | right | both;
    /* 清除左浮动，清除右浮动，同时清除 */
}

• 在开发时几乎只用clear: both;

清除浮动的方法

1. 额外标签法(隔墙法，但平时不常用) W3C推荐
2. 父级添加overflow属性
3. 父级添加after伪元素
4. 给父级添加双伪元素

额外标签法

• 在父级盒子后面新建一个盒子(必须是块级元素)
• 在新建盒子里写上属性clear: both;
• 发现父元素能自动检测高度，不会影响后面的标准流元素
• 这种写法父盒子本身高度没有增加，而只是在浮动元素后增加一个盒子拦住下面标准流的元素

<style>
    .nav {
    
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
    .clear