定位方案和清浮动

最新推荐文章于 2024-05-19 13:00:49 发布

梓木Tosikat

最新推荐文章于 2024-05-19 13:00:49 发布

阅读量156

点赞数

文章标签：定位 css html

本文链接：https://blog.csdn.net/qq_42234538/article/details/106423626

版权

定位方案（Position Schema）

normal flow:

标准流
常规流
文档流

绝对定位、浮动都会让元素脱离标准流，已达到灵活布局的效果

float属性：

left、right、none

浮动的规则：唱着向左或向右方向移动，知道自己的边界津贴这包含快（一般是父元素）或者其他浮动元素的边界为止

层叠关系

标准元素：不存在层叠
定位元素：层叠到标准流元素的上面
定位元素直接可以z-index
前提：position为非static
浮动元素float:right left

位置关系：

标准元素<float元素<定位元素（层叠）

浮动元素不能与行内级、行内块级元素重叠其中文字会被挤出以实现图文环绕的效果

浮动元素规则：

标准元素：标准流中的元素是不存在层叠
定位元素：定位元素会层叠到
浮动元素向左不超过做边缘，向右浮动不超过右边缘
浮动元素之间不存在重叠（左浮找左浮，右浮找右浮）
标准元素<float元素<定位元素（层叠）
浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有有浮动元素的顶端

eg;设置0元素左浮动红蓝为div元素且都为左浮动则会移动到2位置非1位置

<html> 
<style>
    .box {
      width: 400px;
      height: 200px;
      background-color: red;
    }

    .box1 {
      float: left;
      width: 200px;
      height: 200px;
      background-color: orange;
    }

    .box2 {
      float: left;
      width: 100px;
      height: 300px;
      background-color: blue;
    }
  </style>
<body>
  <div class="box">box</div>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
</html>

在这里插入图片描述

清浮动：

1.clear:

left:要求元素的顶部低于之前生成的所有左浮动元素的底部。

right:要求元素的顶部低于之前生成的所有右浮动元素的底部

both：所有浮动元素的底部

缺点:繁琐、维护麻烦

2.给父元素设置宽高

使父元素成为标准流的元素，故下面的元素即可按照标准流进行布局

3.overflow清除浮动

常用且最好用的
浮动坍塌的元素::after{
content:"";
display:block;
height:0;
overflow:hidden;
clear：both;
visibility: hidden;
}

梓木Tosikat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定位方案和清浮动

定位方案（Position Schema）normal flow:标准流常规流文档流绝对定位、浮动都会让元素脱离标准流，已达到灵活布局的效果float属性：left、right、none浮动的规则：唱着向左或向右方向移动，知道自己的边界津贴这包含快（一般是父元素）或者其他浮动元素的边界为止层叠关系标准元素：不存在层叠定位元素：层叠到标准流元素的上面定位元素直接可以z-index前提：position为非static浮动元素float:right left位置
复制链接

扫一扫