HTML与CSS基础之CSS浮动

最新推荐文章于 2024-09-12 18:02:32 发布

OverTheMoon丶

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量187

点赞数

分类专栏： HTML与CSS 文章标签： html css

本文链接：https://blog.csdn.net/Maxxxxx_Moon/article/details/112648099

版权

HTML与CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS浮动的基础知识，包括传统网页布局、浮动布局的原理和应用场景，详细阐述了浮动元素的特性，如脱离标准流、元素贴靠等。还讨论了浮动布局中的高度塌陷问题，并提供了清除浮动的多种方法，如额外标签法、overflow属性以及伪元素方法。此外，文章提到了切图技巧和CSS属性的书写顺序，帮助开发者更好地理解和应用CSS浮动。

摘要由CSDN通过智能技术生成

传统网页布局的三种方式

标准流（普通流/文档流）：按默认的方式排列
浮动流
定位流

CSS浮动

浮动可以改变元素标签默认的排列方式
网页布局的第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

什么是浮动（float）

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
代码示例

float: none | left | right;

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

浮动特性

浮动元素会脱离标准流（脱标）

脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标
浮动的盒子不再保留原先的位置

浮动的元素会一行内显示并且元素顶部对齐

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

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

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动后，它的大小根据内容来决定
浮动的盒子中间是没有缝隙的，是紧挨在一起的

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

为了约束浮动元素的位置，我们一般采取的策略是：

先用标准流的父级元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
网页布局第二准则：先设置盒子大小，之后设置盒子的位置

浮动布局注意点

和浏览器一样宽的盒子不需要指定宽度
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

为什么清楚浮动：
a.高度塌陷：父元素高度自适应，子元素float后，造成父元素高度为0.（子元素浮动后，脱离标准流，子元素不占位置）
b.影响下面的布局
清楚浮动的本质
a.清楚浮动元素造成的影响
b.如果父盒子本身有高度，则不需要清楚浮动
c.清楚浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
语法规范

选择器 {clear ：属性值；}

属性值	描述
left	不允许左侧有浮动元素（清楚左侧浮动的影响）
right	不允许右侧有浮动元素（清楚右侧浮动的影响）
both	同时清楚左右两侧浮动的影响

清除浮动方法

额外标签法也称为隔墙法，是W3C推荐的做法（不推荐）
父级添加overflow属性（不推荐）
父级添加after元素（推荐）
父级添加双伪元素（推荐）

额外标签法

在最后一个浮动元素末尾添加一个空的标签
新添加的空标签必须是块级元素

<style>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
</style>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>

优点：通俗易懂，书写方便
缺点：添加无意义标签，语义化差

父级添加overflow

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll，常用overflow：hidden
优点：代码简洁
缺点：无法显示溢出的部分

父级添加after伪元素

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
</body>

优点：没有增加标签，结构更简单
缺点：照顾低版本的浏览器

父级添加before和after双伪元素

 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

优点：代码更简洁
缺点：照顾低版本的浏览器

PS切图

常见的图片格式
a.产品类的图片常用jpg格式
b.GIF常用于一些图片小动画效果
c.如果想要切成背景透明的图片，可用png格式
d.PSD格式
图层切图
右击图层->快速到处为PNG
如果有多个元素想要导出为图片，合并两个图层（CTRL+E），然后导出
切片切图
1.利用切点工具手动划出
2.导出选中的图片，文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储
3.要导出背景透明的部分，关闭背景的眼睛，存储时选择png格式
PS插件切图

注意

首页通常为index.html

CSS属性书写顺序（重点）

建议遵循以下顺序：

布局定位属性：display/position/float/clear/visibility/overflow(建议display第一个写，毕竟关系到模式)
自身属性：width/height/margin/padding/border/bacground
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性（CSS3）：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…