python界面浮动窗口_Python-浮动 清浮动

# 浮动布局

## 一.display总结

```css

/* inline */

/*1.同行显示, 就相当于纯文本, 当一行显示不下, 如就是一个字显示不下,那么显示不下的那一个字就会自动换行,和纯文本的区别就是有标签整体的概念,标签与标签间有一个空格的隔断*/

/*2.支持部分css样式, 不支持宽高 | 行高(行高会映射到父级block标签) | margin上下*/

/*3.content由文本内容撑开*/

/*4.inline标签只嵌套inline标签*/

/* inline-block */

/*1.同行显示, 当一行显示不下, 标签会作为一个整体换行显示*/

/*2.支持所有css样式*/

/*3.content默认由文本(图片)内容撑开,也可以自定义宽高, 当自定义宽高后,一定采用自定义宽高(显示区域不足,内容会在标签内容换行显示,可能超出显示区域)*/

/*4.inline-block标签不建议嵌套任意标签*/

/* block */

/*1.异行显示, 不管自身区域多大, 都会独占一行*/

/*2.支持所有css样式*/

/*3.width默认继承父级,height由内容(文本,图片,子标签)撑开, 当设置自定义宽高后,一定采用自定义宽高*/

/*4.block可以嵌套任意标签*/

```

## 二.overflow知识

```css

/* 本质 */

/*overflow: 处理内容超出盒子显示区域*/

overflow: auto | scroll | hidden

/*auto: 自适应, 内容超出, 滚动显示超出部分, 不超出则正常显示*/

/*scroll: 一直采用滚动方式显示*/

/*hidden: 隐藏超出盒子显示范围的内容*/

```

## 三.浮动布局

```css

/*float: 浮动布局, 改变BFC的参照方位*/

/*为什么要使用: 使用它, 块级盒子就会同行显示*/

```

```css

float: left | right; 左 | 右 浮动

/*left: BFC参照方向从左向右*/

/*right: BFC参照方向从右向左*/

```

```css

/*浮动的区域有父级的width决定*/

```

## 四.清浮动

浮动问题: 子级浮动了,不再撑开父级的高度, 那么父级如果拥有兄弟标签,可能就会出现布局重叠问题

清浮动: 解决上面的问题, 通过使父级获取一个合适的高度, 这样子级就不会和父级的兄弟布局发生重叠

clear: left | right | both

① 设置父级的死高度

② 通过兄弟设置 clear: both

③ 设置父级overflow属性

.sup {

overflow: hidden;

}

④ 通过父级:after伪类

.sup:after {

content: "";

display: block;

clear: both;

}