7/15 浮动

最新推荐文章于 2022-11-03 09:46:59 发布

困顿小狗

最新推荐文章于 2022-11-03 09:46:59 发布

阅读量72

点赞数

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/neversleepy/article/details/118763645

版权

前端学习专栏收录该内容

33 篇文章 0 订阅

订阅专栏

文章目录

浮动

浮动

基本概念

在这里插入图片描述
浮动元素不再强制那个公式成立。

我觉得浮动可以理解成是东西从底上浮到水面上，但是感觉好像又不太对。沉底的还是会占据一整排的位置（自动调margin-right），float的元素上不去。但是同是浮动元素的就可以并排。

元素脱离文档流之后的特点：世界大同了，不再区分块元素跟行内元素，都变成一种：
1.不再独占一行，后面元素都跟上（不强制约束公式相等）
2.可以设置宽高了，如果不设置的话就是内容撑开的。
3.文字会自动浮在元素的周围（类似杂志排版，文字围绕在图片周围）
在这里插入图片描述

W3C导航条练习

获取焦点的时候颜色跟字体一起变，现在还不知道怎么用一个焦点让两个组件一起变，所以把a调大，直接a一块变了。
没发现每块都是不一样的，就直接平均了，其实写死或者用padding制造不一样大小的分隔比较好。
思路：先整理出结构（html）再写css

高度塌陷

高度塌陷是父元素高度为自动需要靠子元素撑开来获取高度时，但是子元素设置成浮动，脱离了文档流，撑不起来，造成的高度塌陷。
在这里插入图片描述

BFC

BFC可以理解成是一块独立的区域。父元素设立了BFC的话，父元素里面就是一块独立的区域，里面怎么排版都跟外面文件流无关了，想怎么排怎么排。

在这里插入图片描述形成BFC的一些条件：

在这里插入图片描述

3的补充：overflow设置成hidden、auto都可以。
bfc开启之后不会被浮动元素所覆盖，子元素的margin不会传递给父元素，不会让父元素也动了。

例子：overflow设置成hidden

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        .outer{
           background-color: aqua;
           border: 10px red solid;
           overflow: hidden;
        }
        .inner{
            background-color: olive;
            border: 10px green solid;
            height: 100px;
            width: 50px;
            float: left;
        }
        .div2{
            background-color: olive;
            border: 10px green solid;
            height: 100px;
            width: 50px;
            float: left;
        }
        .div3{
            background-color: olive;
            border: 10px green solid;
            height: 100px;
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
        </div> 
        <div class="div2">
        </div>
    </div>
    <div class="div3"></div>
</body>

</html>

在这里插入图片描述

div3没有设置浮动,divouter设置了float。但是div.outer开启bfc的时候就可以在整个文档流里面占据位置了,但是他本身的面积也是里面的子元素撑开的，挺神奇。

float-root

css的新属性 float-root
https://www.webdesigns.com.tw/css_flow-root.asp
https://www.jb51.net/css/724974.html
只要设置就行，比较好用，设置了就没有高度塌陷了。而且父元素在设置这个float-root之后真的占据了位置，后面的div3没有往上跑。
而根元素，作为页面中所有内容的容器，自身脱离常规流，为整个文档创建了一个块级格式化上下文环境。

在这里插入图片描述

clear

在这里插入图片描述

::after

在这里插入图片描述

在这里插入图片描述
这里就是。box1::after就是box1最后一个子元素 box2后面等同于box3
::after，伪元素本身就是行内元素，要用display：block

在这里插入图片描述
### bfc最终版（可以解决高度塌陷&外边距重叠）（不太理解）

困顿小狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7/15 浮动

浮动基本概念浮动元素不再强制那个公式成立。我觉得浮动可以理解成是东西从底上浮到水面上，但是感觉好像又不太对。沉底的还是会占据一整排的位置（自动调margin-right），float的元素上不去。但是同是浮动元素的就可以并排。元素脱离文档流之后的特点：世界大同了，不再区分块元素跟行内元素，都变成一种：1.不再独占一行，后面元素都跟上（不强制约束公式相等）2.可以设置宽高了，如果不设置的话就是内容撑开的。W3C导航条练习获取焦点的时候颜色跟字体一起变，现在还不知道怎么用一个焦点让两个组件一
复制链接

扫一扫