左右浮动的学习

最新推荐文章于 2024-07-25 11:52:08 发布

月亮1打烊了

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量97

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/Xyh9375/article/details/131771961

版权

一、流的概念

文档流是相对于盒子模型讲的

文本流是相对于文字段落讲的

元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在

它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱出文本流。

二、浮动

浮动的本质：用来实现并排的效果

浮动使用的要点：要浮动，并排的盒子都实现浮动

父盒子要有足够的宽度，否则子盒子会掉下去

三丶浮动的顺序贴靠顺序

子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素

如下图所示：3号盒子会掉到2号盒子的下面

四丶浮动的袁旭一定能设置宽高

浮动的元素不再区分块级元素、行内元素、已经脱离了标准文档，一律能够设置宽度和高度，即使他是a标签或span标签

五丶右浮动

六、使用浮动的注意事项

垂直显示的盒子，不要设置浮动、只有并排显示的盒子才要设置浮动

“ 大盒子带着小盒子跑 ” ，一个大盒子中、又是一个小天地，内部可以继续使用浮动

div 是免费的，不要节约盒子

七、BFC规范

BFC规范（Box-Formatting Context 块级格式化上下文）是页面上的一个隔离的独立容器，容器里面

的子元素不会影响到外面的元素，反之亦然。

观察下面的例子

<style>
        .box{
           width: 400px;
           border: 2px solid red;
        }
        .cc{
            float: left;
            height: 200px;
            width: 200px;
            background-color: yellow;
        }
        .bb{
            float: left;
            height: 200px;
            width: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cc"></div>
        <div class="bb"></div>
    </div>
</body>

一个盒子不设置 height ，当内容子元素都浮动时，无法撑起自身

这个盒子没有形成 BFC

解决方法

给父元素设置：position：absolute

如何创建BFC？

float的值不是none
position的值不是static或者relative
display的值是inline-block、flex、inline-flex
overflow：hidden
八、清除浮动

清除浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响

方法一：父元素添加 overflow：hidden

方法二：给后面的父盒子设置 clear：both 属性 -- 会导致margin失效

方法三：使用::after 伪元素给盒子添加最后一个子元素，并给 ::after设置 {content:"";clear： both;displa:block;}

方法四：在两个父盒子之间隔一个携带clear：both的空盒子。

1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6
7 .clearfix::after {
8 content: '';
9 clear: both;
10 display: block;
11 }
12
13 p {
14 float: left;
15 width: 100px;
16 height: 100px;
17 background-color: pink;
18 margin-right: 20px;
19 margin-bottom: 20px;
20 }
21 </style>
22 </head>
23
24 <body>
25 <div class="clearfix">
26 <p></p>
27 <p></p>
28 </div>
29
30 <div class="clearfix">
31 <p></p>
32 <p></p>
33 </div>

月亮1打烊了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
左右浮动的学习

文档流是相对于盒子模型讲的文本流是相对于文字段落讲的元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有脱出文本流。浮动的本质：用来实现并排的效果浮动使用的要点：要浮动，并排的盒子都实现浮动父盒子要有足够的宽度，否则子盒子会掉下去子盒子会按顺序进行贴靠，如果没有足够的空间，则会寻找前一个兄弟元素如下图所示：3号盒子会掉到2号盒子的下面四丶浮动的袁旭一定能设置宽高。
复制链接

扫一扫