HTML5和css样式：浮动和清除浮动

什么是浮动
浮动包含哪些属性
网页布局中浮动的作用
如何清除浮动

1.什么是浮动

1.1前言：标准流（普通流，文档流）

所谓的标准流:就是标签按照规定好默认方式排列.
1.块级元素会独占- -行 ,从上向下顺序排列。
●常用元素:div、hr、 p、h1~h6、ul、 ol、 d|、 form、table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。●常用元素:span、a、i、 em等
以上都是标准流布局, 我们前面学习的就是标准流,标准流是最基本的布局方式。
这三种布局方式都是用来摆放盒子的,舒摆放到合适位置,布局自然就完成了。

1.2浮动定义

float属性是CSS（层叠样式表）中用于控制元素布局的一个重要属性。它允许元素脱离常规的文档流，并浮动到其父元素的左侧或右侧，从而使其他内容围绕其周围布局。
浮动最先产生的目的是为了让文字环绕图片

1.3浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准侧.

2.浮动内包含哪些属性

left：元素向左浮动，其他内容将围绕其右侧进行布局。
right：元素向右浮动，其他内容将围绕其左侧进行布局。
none：默认值，元素不浮动，将按照正常布局进行渲染。
nherit：继承父元素的float属性值（但需要注意的是，并非所有浏览器都支持inherit值，尤其是旧版本的Internet Explorer）。

3.网页布局中浮动的作用

3.1创建多列布局：
通过为多个元素设置float属性，可以将它们放置在同一行，实现多列布局效果。这对于创建网页中的侧边栏、内容区和页脚等布局非常有用。
3.2图片和文本的排列：
浮动属性也常用于控制图片和文本的排列。通过将图片浮动到左侧或右侧，可以让文本围绕图片排列，实现图文混排的效果。
3.3创建响应式布局：
结合媒体查询（Media Queries）和float属性，可以创建在不同设备上都能良好显示的响应式布局。通过为不同屏幕尺寸设置不同的float属性值，可以调整元素的布局方式，以适应不同设备的显示需求。

4.如何清除浮动

4.1为什么要清除浮动

由于父级盒子很多情况下，不方便给出高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

4.2清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度 ,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了

4.3清除浮动的方法

1.额外标签法也称カ隔墻法,是W3C推荐的做法。

<html>
<style>
/* 清除浮动的第一种方法 */
         .clear {
            clear: both;
        } 
</style>
</html>
<body>
   <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="clear"></div>
    </div>
</body>

clear属性主要用于指定一个元素是否要移动到它之前的浮动元素的下面。clear属性可以应用于浮动元素和非浮动元素，但它主要影响的是元素的布局位置，特别是与浮动元素的关系。

属性值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许浮动元素
inherit	规定应该从父元素继承clear属性的值
none	默认值，允许浮动元素出现在该元素的任何一侧，如果没有设置clear属性或设置为none，浮动元素可以围绕该元素布局

2.父级添加overflow属性

   .box {
            width: 800px;
            border: 5px solid #f6baf8;
            background-color: #fbe6e6;
            margin: 0 auto;
            /* 第二种方法，清除浮动父级添加overflow */
            overflow: hidden;

        }

CSS中的overflow属性用于指定当内容溢出元素框时，是否应该剪裁内容、显示滚动条，或者显示溢出的内容。overflow属性可以在不同的方向（水平和垂直）上单独控制，但基本的overflow属性是针对整个元素的。不过，CSS3 引入了overflow-x和overflow-y属性，允许你分别指定水平和垂直方向上的溢出行为。

属性	描述
visible	默认值，内容不会被修剪，会渲染在元素框之外
hidden	内容会被修剪，并且其余的内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会自动显示滚动条以便查看其余的内容
overflow-x	仅影响水平方向上的溢出
overflow-y	仅影响垂直方向上的溢出

3.父级添加after伪元素

    /* 第三种清除浮动的方法::after伪元素清除法 */
        .box :after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

4.父级添加双伪元素

  /* 第四种方法：双伪元素清除浮动 ，也是给父元素添加，子不教父之过*/
         .clearfix :before,
        .clearfix :after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }