CSS第四天——浮动

最新推荐文章于 2024-07-19 15:20:42 发布

Coco sun.

最新推荐文章于 2024-07-19 15:20:42 发布

阅读量251

点赞数 2

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/fjhkrje/article/details/120124764

版权

css 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

CSS第四天——浮动

1.浮动

1.1CSS布局的三种机制

网页布局的核心–就是用 CSS来摆放盒子。

CSS提供三种机制来设置盒子的摆放位置——普通流（标准流）、浮动、定位

普通流——块级元素从上向下、行内元素自左到右的HTML布局
浮动——让盒子从普通流浮起来，主要作用是让多个块级盒子一行显示
定位——将盒子定在浏览器的某一个位置–CSS离不开定位，特别是后面的js特效。

1.2为什么需要浮动

如果一行需要多个块且对齐，行内块（inline-block）的缺陷：

1.它可以实现多个元素一行显示，但是中间会有空白缝隙
2.它不能实现盒子左右对齐

所以我们需要浮动来完成网页布局

1.3什么是浮动（float）

概念：元素的浮动是指设置了浮动属性的元素会

脱离标准普通流的控制
移动到指定位置

作用：

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。
可以实现盒子的左右对齐等等。
浮动最早是用来控制图片，实现文字环绕图片的效果。

语法：

float

选择器{
    float: 属性值；
    float:none;//元素不浮动
    float:left;//向左浮动
    float:right;//向右浮动
}

1).浮动口诀之浮

浮动——漂浮在普通流上面。脱离标准流。俗称“脱标”

.box1 {
width: 200px;
height: 200px; 
background-color: rgba(255,0,0,0.5);
float: left;
}
.box2 {
width: 150px;
height: 380px;
background-color: skyblue; 
}

2).浮动口诀之漏

由于不再占有原先的位置，底下的元素会升上来

3).浮动口诀之特

float属性会改变元素display属性。
任何元素都可以浮动，浮动元素会生成一个块级框——它与行内块极其相似
当多个元素都浮上去时，由于它们都变为了“行内块”，便会排列在一行，且中间没有空隙——这也正是与真正行内块的不同
浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

1.4浮动的应用（重要）

浮动是脱标的，因此会有影响标准流的风险。因此，我们需要给浮动的元素添加一个标准流的父亲，这样，最大化减小了对其他标准流的影响

案例
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    * {                             /*清除元素默认内外边距样式(html自带的)*/
        margin: 0;
        padding: 0;
    }
    li {                           /*清除列表样式(前面的小点点)*/
        list-style: none;
    }
    .box {
        width: 1226px;
        height: 615px;
        /*background-color: deeppink;*//*调试时设置背景颜色，之后别忘了注释掉*/
        margin: 20px auto;
    }
    .box .left {
        float: left;
        width: 234px;
        height: 615px;
        background-color: pink;
    }
    .box .right {
        float:right;
        width: 992px;
        height: 615px;
        /*background-color: skyblue;*/
    }
    .right li {
        float: left;
        width: 234px;
        height: 300px;
        background-color: pink;
        margin-left: 14px;
        margin-bottom: 15px;
    }
    li:hover {
        box-shadow: 0 15px 30px rgba(0,0,0,.1);
    }
</style>
</head>
<body>
<div class="box">
    <div class="left"> 左边 </div>
    <ul class="right">
        <li>右1</li>
        <li>右2</li>
        <li>右3</li>
        <li>右4</li>
        <li>右5</li>
        <li>右6</li>
        <li>右7</li>
        <li>右8</li>
    </ul>
</div>
</body>
</html>

1.5浮动的扩展

1).浮动元素与父盒子的关系

子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

2).浮动元素与兄弟盒子的关系

浮动只会影响当前的或者是后面的盒子，不会影响前面的标准流。

在这里插入图片描述

2.清除浮动

2.1 为什么要清除浮动

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

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
准确地说，并不是清除浮动，而是清除浮动后造成的影响

2.2清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮
动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

2.3清除浮动的方法

语法：
```
选择器{clear:属性值;} //clear 清除
```
属性值可以取left，right，但几乎我们只是用both（同时清除左右两侧浮动元素的影响）
消除浮动的四种方法：
额外标签法（隔墙法）

在最后一个浮动元素后加一个空标签 <div style="clear: both"></div>，空标签是br也可以，但这些标签的语义都不明确，结构化较差（缺点）

这个空标签像一个空气墙，看不见摸不着；可加上之后，父级盒子就能根据浮动元素的高度被撑开了

父级添加overflow属性

父级盒子加上 overflow: hidden || auto || scroll （属性值写哪个都可以）

优点：代码简洁

缺点：内容增多时，由于不再能自动换行，导致部分被溢出的内容无法显示

使用after伪元素

这是第一种（添加空元素）的升级版，好处是不用单独加空标签（实际上是通过after伪元素多生成个空标签）

.clearfix:after {				/* 把clearfix类加在父级盒子的声明中就可以了 */
     content: "";
     display: block;
     height: 0;
     visibility: hidden;
     clear: both;
}
.clearfix {						/* IE6，IE7不支持上面的after写法；这句话是专门用来清除浮动的 */
     *zoom: 1;
}

使用before，after双伪元素

.clearfix:before,
.clearfix:after {
     content: "";
     display: table;
}
.clearfix:after {
     clear: both;
}

.clearfix {
     *zoom: 1;					/* 同样是IE6，IE7的专门写法 */
}

使用伪元素的优点是：语义明确；这也是最推荐的写法

2.4清除浮动总结

什么时候用清除浮动？

父级没高度
子盒子浮动了
影响下面布局了，我们就应该清除浮动了。

一些图片总结：

jpg图像格式:
JPEG (.JPG) 对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式的
gif图像格式:
GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果
png图像格式
是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景
PSD图像格式
PSD格式是Photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计草稿。

切片工具

注：本文根据《黑马程序员-web前端》笔记改编

Coco sun.

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
CSS第四天——浮动

CSS第四天——浮动1.浮动1.1CSS布局的三种机制网页布局的核心–就是用 CSS来摆放盒子。CSS提供三种机制来设置盒子的摆放位置——普通流（标准流）、浮动、定位普通流——块级元素从上向下、行内元素自左到右的HTML布局浮动——让盒子从普通流浮起来，主要作用是让多个块级盒子一行显示定位——将盒子定在浏览器的某一个位置–CSS离不开定位，特别是后面的js特效。1.2为什么需要浮动如果一行需要多个块且对齐，行内块（inline-block）的缺陷：1.它可以实现多个元素一行显示，
复制链接

扫一扫