09.浮动样式

最新推荐文章于 2023-10-18 21:02:51 发布

拾玥花开

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量151

点赞数 1

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_44691513/article/details/104392893

版权

09.浮动样式

浮动样式最初是用来将文字环绕图片来设计的，但是发现可以用来做页面的布局。

默认元素普通流布局

浏览器在默认情况下规定一个块元素在父元素内的排列规则：
从上往下排列
从左开始排列
一个块元素占一行

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZ5goJzp-1582094357122)(C:\Users\dell\Desktop\我的博客\QQ截图20200218123750.png)]$

<style>
    .father{
        width:500px;
		height:500px;
    }
    .box1{
        float:left;
        width:100px;
        height:100px;
    }
    .box2{
        width:200px;
        height:200px;
    }
    .box3{
        width:300px;
        height:300px;
    }
</style>
<body>
    <div class="father">
        <div class="box1"></div>
         <div class="box2"></div>
         <div class="box3"></div>
    </div>
</body>

说明：将box1设置向左浮动，首先box1父脱离默认标准流布局，此时box2和box3将会上移.

浮动的注意事项：

1.浮动不会被覆盖。

2.具有和文本环绕相同的特性，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列.

行内元素浮动的设置

行内图片默认是向文本基线对齐。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s9y4Di2H-1582094357123)(C:\Users\dell\Desktop\我的博客\QQ截图20200219143031.png)]$

而若是在行内模型设置浮动则图片脱离平面，使得两边的问你就会靠拢。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cPNZhMC4-1582094357124)(C:\Users\dell\Desktop\我的博客\QQ截图20200219143055.png)]$

设置了浮动的行内元素的顶部不会超出所在行的行框顶部。

浮动样式父元素高度塌陷

当父元素没有固定高度时，父元素高度由子元素高度之和撑开。而当父元素没有固定高度并且所有的元素都浮起来时，则会出现父元素的高度塌陷。

解决方案：

第一类：让父元素BFC化
给父元素设置下列属性之一即可
overflow:hidden;

display:inline-block;
float:left;
position:absolute;
… …

当父元素形成BFC时, 父元素就具有了包裹性:
可简单理解为,父元素有了一个虚拟的框(此时子元素的外边距不再会和父元素的外边距合并), 父元素的宽高由里面还在平面上的元素和漂浮的元素一同撑开。

第二类：利用一个幽灵元素来清除浮动，手动撑开父元素的高度
方法有：
新建一个空的块元素，并给他设置clear：both属性（缺陷：破坏页面的文档结构）
使用伪元素生成一个幽灵元素，并给他设置clear：both属性

clear样式详解

Clear：清除浮动（元素盒子的边不能和前面的盒子相邻）
left; 左侧抵抗浮动
right; 右侧抵抗浮动
both; 两边都抵抗浮动(上面两个合并)

）
left; 左侧抵抗浮动
right; 右侧抵抗浮动
both; 两边都抵抗浮动(上面两个合并)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47lI4hZW-1582094357124)(C:\Users\dell\Desktop\我的博客\QQ截图20200219143732.png)]$

拾玥花开

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
09.浮动样式

09.浮动样式浮动样式最初是用来将文字环绕图片来设计的，但是发现可以用来做页面的布局。默认元素普通流布局浏览器在默认情况下规定一个块元素在父元素内的排列规则：从上往下排列从左开始排列一个块元素占一行<style> .father{ width:500px; height:500px; } .box1{ floa...
复制链接

扫一扫