6.两栏布局，经典bug，bfc,float

最新推荐文章于 2023-10-26 11:34:44 发布
最新推荐文章于 2023-10-26 11:34:44 发布
阅读量131 收藏
点赞数
分类专栏： html/css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuexiaozhuguo/article/details/119543329
版权

两栏布局

效果图（先写右又写的左）：
在这里插入图片描述

先写右边又写的左边;先写左再写右也可以，必须是第一个出生的设置为绝对定位，下一个元素才可以上来成一排，若设置第二个出生的元素为绝对定位，就算他脱离原来位置进行定位，他也窜不到第一行来，因为第一个元素是块级元素，独占一行
在这里插入图片描述

    <!-- 两栏布局 -->
    <!-- 肯定是两个div；一个固定，一个自适应 -->
    <!-- 思路，怎么让两个div并到一排：绝对定位，脱离原来位置进行定位 -->
    <div class="right"></div>
    <div class="left"></div>
    <!-- 两栏布局 -->

/* 两栏布局 */
/* 1.右边是自适应，只设置了高度，，宽度自适应 */
/* 2.设置绝对定位，让下面的元素上来； */
/* 3.上来之后因为设置的宽度是100%；所以会掩盖下面的元素，设置margin-left，让他把左边的元素让出来 */
.right{
    height:50px;
    width:100%;

    background-color: lightsalmon;

    position:absolute;
    left:0px;

    margin-left:100px;
}
/* 一般都是左边固定，
1.设置好宽度和高度 */
.left{
    height:50px;
    width:100px;

    background-color: lightgreen;
}
/* 两栏布局 */

俩个经典bug:margin塌陷

在这里插入图片描述

    <!-- 两个经典bug：margin塌陷 -->
    <div class="wrapper">
        <div class="content"></div>
    </div>
    <!-- 两个经典bug：margin塌陷 -->

/* 两个经典bug：margin塌陷 */
.wrapper{
    /* 让content的父级即wrapper距离带着他跑,距离页面左边150px;距离上边150px; */
    margin-left:150px;
    margin-top:150px;


    background-color: #000;

    width:100px;
    height:100px;
}

.content{
    /* 让content距离他父级的左边线50px; */
    margin-left:50px;

    background-color: green;

    width:50px;
    height:50px;
}
/* 两个经典bug：margin塌陷 */

content设置距离他父级左边margin-left没问题,但设置margin-top,即设置距离父级上边线时,没反应,还是上述的图;根本不相对于他父级的棚往下走;

.content{
    margin-top:50px;
}

直到margin-top加到比他父级距离页面顶端的margin-top大时,才会动,但此时,他和他父级一起动,相当于一个整体;
即父子嵌套的元素垂直方向的margin父子是结合到一起的,他俩取最大的那个值.
即
在这里插入图片描述

.content{
    margin-top:200px;
}

导致的一个现象就是,他父级的元素相对于浏览器顶棚进行定位没问题,但他的子级应该也要相对于父级的顶棚往下窜才对,但他没往下,就好像他父级没有棚一样.就好像棚塌陷了一样,所以叫margin塌陷.

解决办法:

这个bug不能完美的解决,只是找到一种方法来弥补

  1. 不能用的法子:父级棚塌陷了,就手动给他父级加一个,直接加border
    不专业,不合适;按照图纸,差1px也不行,但它是可以解决这个问题的;
    在这里插入图片描述
.wrapper{
    border-top:1px solid red;
}
.content{
    margin-top:50px;
}
  1. bfc ->block format context 块级格式化上下文
    css是把html的每一个元素都当成一个盒子,而且他进一步的认为每一套盒子里面都有自己的一套渲染规则,这个渲染规则就是你写完这个代码,它能根据你写的这个代码给你绘制出来,就是每一个盒子里面都有一套一模一样的语法规则,这是html里面所有盒子的正常的规则,然后我们可以通过一些特定的手段让其中的一些盒子或一个盒子里面的渲染规则发生改变;
    即bfc设置之后,特地党的盒子会遵循另一套语法规则;

解决方法:改变他父级的渲染规则,让他的父级变为bfc元素,他父级变为bfc后,父级和子级产生的margin塌陷就解决了

如何触发一个盒子的bfc

  1. position:absolute;
  2. display:inline-block;
  3. float:left/right
  4. overflow:hidden

使用overflow触发
给父级添加overflow:hidden 溢出部分隐藏
在这里插入图片描述


.wrapper{
    overflow:hiddden;
}
.content{
    margin-top:80px;
}

使用display:inline-block触发
改变为块级行元素
在这里插入图片描述

.wrapper{
    display:inline-block;
}
.content{
    margin-top:80px;
}

使用1 2 3 4均可以解决这个问题,但解决问题的同时,又引发了新的问题:针对特定的需求,哪一个无影响用哪个

两个经典bug:margin合并

    <!-- 两个经典bug:margin合并 -->
    <span class="box1">123</span>
    <span class="box2">234</span>
    <!-- 两个经典bug:margin合并 -->

/* 两个经典bug:margin合并 */
.box1{
    background-color: red;
}
.box2{
    background-color: green;
}
/* 两个经典bug:margin合并 */

1.设置box1的右边距
在这里插入图片描述

.box1{
    margin-right:50px;
}

2.在设置box2的左边距
在这里插入图片描述

.box2{
    margin-left:50px;
}

俩个box设置的左右margin相加了,这是正常现象叫区域不能共用

margin合并
俩个兄弟结构的元素,他俩垂直方向的margin是合并的,共用的
在这里插入图片描述

    <!-- 两个兄弟结构的元素 -->
    <div class="demo1">1</div>
    <div class="demo2">2</div>

.demo1{
    background-color: red;
    margin-bottom:100px;
}
.demo2{
    background-color: green;
    margin-top:100px;
}

解决办法

依旧可以使用bfc来解决->要解决的是demo1和demo2的一个bug,就必须让他们俩处在bfc环境下,给他俩加一个父级,这个父级有bfc语法加持.
在这里插入图片描述

    <div class="wrapper">
        <div class="demo1">1</div>
    </div>
    <div class="wrapper">
        <div class="demo2">2</div>
    </div>

.wrapper{
    overflow:hidden;
}
.demo1{
    background-color: red;
    margin-bottom:100px;
}
.demo2{
    background-color: green;
    margin-top:100px;
}

margin塌陷是只添加了Css,而margin合并解决的时候必须要在html上加持一个父级,改变了html结构.编程的时候html,即结构最重要,结构是不可以随便乱加,乱改的;就是我们不能因为修改一个bug,要去添加一个无用的结构

这个margin合并不解决,直接添加一个就可以,可以通过数学计算的方式解决
即若margin-bottom:100px;margin-top:100px;故应该间隔200px,则直接改为margin-bottom:200px;或者margin-top:200px;即可

float 浮动模型

三大模型:盒模型,层模型(position),浮动模型(float)

在这里插入图片描述

    <!-- float -->
    <!-- 三大模型:盒模型,层模型,浮动模型 -->
    <!-- float:left/right  -->

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    <!-- float  -->

/* float  */
.wrapper{
    width:300px;
    height:300px;
    border:1px solid #000;
}
.content{
    color:#fff;
    background-color: black;
    width:100px;
    height:100px;
}
/* float  */

加上浮动left之后
排队了,占一行了 从左往右排
在这里插入图片描述

.content{
    float:left;
}

加浮动right
从右往左排
在这里插入图片描述

.content{
    float:right;
}

将内部子元素变多 变成9个 left
在这里插入图片描述

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
        <div class="content">4</div>
        <div class="content">5</div>
        <div class="content">6</div>
        <div class="content">7</div>
        <div class="content">8</div>
        <div class="content">9</div>
    </div>

.content{
    float:left
}

float可以使元素站队,而且在站队的过程中还能加margin…
在这里插入图片描述

/* 将外部容器扩宽一点;因为浮动规则是:剩下的空间够占一个就占,不够就去下一行;站队的边界是父级的边界 */
.wrapper{
    width:350px
}
.content{
    margin-left:10px;
    margin-bottom:10px;
}

淘宝上这些样式用float浮动便可以做
在这里插入图片描述

浮动元素产生了浮动流,
所有产生了浮动流的元素,
块级元素看不到,自然而然就是分层的效果
产生了1.bfc的元素和2.文本类属性(带有inline)的元素以及3.文本都能看到浮动元素

1.box设置了float,产生了浮动流,所以块级元素看不到,demo就上去了
在这里插入图片描述
)]

    <div class="box"></div>
    <div class="demo"></div>

.box{
    width:100px;
    height:100px;
    background-color: #000;;

    float:left;
    opacity: 0.5;
}
.demo{
    width:150px;
    height:150px;
    background-color: green;
}

2.文本类属性的元素以及文本可以看到产生浮动流的元素
在这里插入图片描述

    <div class="box"></div>
    123

3.触发bfc的元素也可以看到产生浮动流的元素
在这里插入图片描述

    <div class="box"></div>
    <div class="demo"></div>

.demo{
    float:left;
}

当自子级设置了float之后,他的父级div便包不住它了,因为块级元素看不到产生了浮动流的元素
不加float 正常情况下:
在这里插入图片描述

    <div class="wrapper">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>

.wrapper{
    /* 不加宽高,即宽度自适应,高度由内容撑起来 */
    border:1px solid #000;
}
.content{
    color:#fff;
    background-color: black;
    width:100px;
    height:100px;
}

当添加浮动之后
他的父级包不住了,他的父级是块级元素,所以自然看不到浮动元素
在这里插入图片描述

.content{[
    float:left;
]}

怎么拿父级来包住浮动子级呢?
1.加一个高就可以了;但不可以一劳永逸,高度不确定
在这里插入图片描述

.wrapper{
    height:100px;
}

2.罪魁祸首是浮动流,只要把浮动流清除就没问题了,他的父级就正常了
在这里插入图片描述

    <div class="wrapper">
        <div class="content">1</div>
        <!-- 1 产生的浮动流,逻辑上是对后续元素有影响
        1产生的浮动流:------------------------------ -->
        <div class="content">2</div>
        <!-- 2产生的浮动流:------------------------------ -->
        <div class="content">3</div>
        <!-- 3产生的浮动流:------------------------------ -->
        <!-- 若在最后添加一个p元素,则这个p元素会受第三个浮动流的影响,他出生的位置应该在第一行 -->
        <p style="border-top:10px solid green"></p>
    </div>

若把第三个产生的浮动流去掉,就没有人影响p了
在p上增加一个语法clear即可;clear只有一个功能:清楚周边的浮动流
在这里插入图片描述

p{
    clear:both;
}

当设置p的边框粗细为0px时,我们的包裹问题解决了,即只要p它逻辑上在那,不需要像素,他就可以清除浮动流.

辞旧2031
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
横向两列布局（float）
happymorecc的博客
07-21 639
要做一个这个： 代码如下： HTML： CSS：
Float 两列布局示例
weixin_30273501的博客
07-17 484
最终样式如下： 网页代码如下： View Code <body> <header> Header </header> <div id="wrapper"> <div id="sidebar"> SideBar ...
CSS：两栏布局【表单】的四种方式：float/position/flex/grid
weixin_43932309的博客
10-31 1059
CSS：两栏布局的四种方式：float/position/flex/grid，主要针对表单提交。
实现两栏布局(左边固定，右边自适应)的六种方法
qq_43456687的博客
04-12 4148
html内容如下 <div class="wrap"> <div class="left">left</div> <div class="right">right</div> </div> 方法一：利用float .left { float: left; width: 200px; background-color: pink;
实现两栏布局、三栏布局的几种方式
挥别了青春的博客
10-26 497
两栏布局 1. float + margin .first-block { background: #F44336; width: 100px; height: 100px; float: left; } .second-block { background: #00BCD4; height:100%; margin-left:100px; } 2. float + ...
CSS练习题（居中五环 | 两栏布局 | 两个经典bug | BFC | 浮动元素）
m0_53222768的博客
12-14 1706
一、居中五环（html+css） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head> <body> <div class="
HTML CSS零基础入学宝典：实例：居中五环,两栏布局,两个常见bug,BFC
# 1. HTML和CSS基础入门 ## 1.1 HTML基础知识介绍 HTML（HyperText Markup Language）是用来描述网页...通过使用标签和属性，可以创建出整个网页的结构。... ...它们通常成对出现，包括开始标签和结束标签，用来定义元素。...
IE6浮动换行bug比较实用简单解决方法
12-09
`是解决IE6浮动换行bug的关键，它创建了一个新的BFC（块格式化上下文），使得浮动元素不会影响到容器外部的元素排列。 接下来，我们看到`.main_l`、`.main_c`和`.main_r`分别代表左、中、右三个部分的浮动元素，...
BFC理解及运用BFC解决css bug
Msinwln的博客
06-13 1874
BFC理解及运用BFC解决css bug Block Formatting Context (“块级格式化上下文”) 的缩写即为 BFC BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 BFC的布局规则 内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。 每个盒子（块盒与行盒）的margin
css经典布局系列二——等分等高布局
木头房子的格子铺
04-20 623
文章目录一列定宽，一列自适应float + marginfloat + overflowtableflex等分布局float+百分比flextable等高布局tableflexfloat多列的等高布局 一列定宽，一列自适应 要求两列，左边一列固定宽度，右边一列根据浏览器自适应； <div class="parent"> <div class="left"> ...
如何实现两栏布局？这篇文章告诉你所有的细节！
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
10-26 916
两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如Ant Design文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器
两栏布局、三栏布局常用方法详解
abuanden的博客
03-03 744
这里写目录标题两栏布局一栏固定宽度，一栏自适应一、左float，右margin-left二、左侧float:left; 右侧overflow:hidden；（推荐）三、利用绝对定位四、利用弹性布局（推荐）一栏不定宽，一栏自适应一、左侧float:left; 右侧overflow:hidden；（BFC）二、利用弹性布局（推荐）三栏布局一. 浮动布局二、绝对定位布局三、flex布局(推荐）四、网格布局（推荐）五、圣杯布局（float+负margin）六、双飞翼布局(推荐） 两栏布局 一栏固定宽度，一栏自适应
CSS布局说——两栏布局、三栏布局（圣杯、双飞翼）
泊一的博客
07-28 294
CSS布局 文档流 内联元素从左向右 块级元素从上向下 各占一行 定位 position属性，有6大类 static 默认设置，就是相对于文档流位置 -relative 相对定位，是相对于原来位置移动使用，还在文档流中 -absolute 绝对布局，是相对于最近那个position不为static为参照点布局，脱离文档流 -fixed 相对于窗口固定，脱离文档流 -sticky ...
两栏布局的几种方法
chord_fish的博客
07-04 925
两栏布局左自适应右固定。 （1）左浮动，右固定 左边浮动，右边利用margin - left将右边的盒子顶出去，自适应添加了剪切效果 .main{ padding: 0; margin: 0; height: 100px; } .left{ float: left; width:100px; height: 100px; background: red; f
实现两栏布局的五种方式
weixin_42745647的博客
10-02 427
实现两栏布局也是一道经典的面试题，两栏布局即左边固定右边伸缩，要实现两栏布局的方式超过十种了，下面举例五种，用来抛砖引玉。
CSS---CSS高级技巧---常见布局技巧---7.28
weixin_50768118的博客
07-28 192
1.margin负值的运用、2.文字围绕浮动元素、3.行内块的巧妙运用（页码）、4.CSS三角强化 CSS初始化
前端三大布局,float,flex,grid的介绍
efew212efe的博客
04-27 1645
什么是布局 在说三大布局之前我们先聊聊什么是布局：布局就是把页面分成一块一块，按左中右、上中下等排列 现在的布局分类有两种： 固定宽度布局，一般宽度为960/1000/1024px 不固定宽度布局，主要靠文档流的原理来布局 还有一种就是响应式布局，这种布局要考虑到手机端的布局，在pc端固定，在手机端不固定 布局的思路： 由大到小，先定下大局再完善小部分，一般老手使用这种办法 由小到大，先完成小部分，再组合成大布局，新手推荐 前端戒律： 在布局的时候千万不要将界面写死，永远不要把width和he
实现常用的两栏布局(左侧固定+右侧自适应)以及三栏布局(圣杯布局和双飞翼布局)
Younguys
07-06 2135
两栏布局和三栏布局是我们常用到的布局形式，下面我们分别进行实现和总结。现在有以下 DOM 结构： （1）利用浮动，左边元素宽度固定 ，设置向左浮动。将右边元素的 设为固定宽度 。注意，因为右边元素的 默认为 ，所以会自动撑满父元素。 （2）同样利用浮动，左边元素宽度固定 ，设置向左浮动。右侧元素设置 这样右边就触发了 ， 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。 (3) 利用 布局，左边元素固定宽度，右边的元素设置 。 (4）利用绝对定位，父级元素设为相对定位。左边元素 定位，
CSS-四种两栏式布局
weixin_40122996的博客
08-27 5679
四种两栏式布局 先分别介绍float、position、flex和table 1.float属性指定一个盒子（元素）是否应该浮动。 在早期浏览器当中，文档类型基本都是图片加文字进行页面展示。float属性最开始的设计是想让文字环绕图片 例如这样： 而开发人员无意中利用它做了一些本不应该是float设计时的工作，于是早期的页面布局一般都是float布局。例如让两个块级盒子在一行...
BFC原理与应用：自适应两栏布局解析
"本文主要介绍了如何使用BFC(Block Formatting Contexts)实现自适应两栏布局，探讨了BFC的概念、触发条件以及其在布局中的应用。" BFC，全称Block Formatting Context，是Web页面布局中的一种概念，主要用于定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值