CSS_浮动

发布时间:2023-06-27 12:30

CSS_浮动

文章目录

  • CSS_浮动
  • 一、浮动来源?
  • 二、浮动的设置和特点
    • 1、浮动的书写格式
    • 2、注意事项
    • 3、浮动特点
  • 三、设置浮动后,块元素和行内元素的特点
  • 四、页面小布局
  • 五、解决高度塌陷的问题
    • 解决方法:BFC(Block Formatting Context) 块级格式化环境
      • 1、设置元素的浮动(不推荐)
      • 2、将元素设置为行内块元素(不推荐)
      • 3、将元素的overflow设置为一个非visible的值(常用,但是还是有点缺陷,只有在极个别的情况下会发生错误)
  • 六、clear(非常重要)
    • 原理:
    • 属性:
  • 七、最终解决高度塌陷的方案
  • 八、clearfix:高度塌陷➕上外边距折叠的现象
    • 1、上外边距折叠的现象解决
    • 2、clearfix双解决
  • 总结


一、浮动来源?

浮动在原先用于解决图片文字环绕的场景(即浮动不会覆盖文字)后面逐渐演变为一种水平布局的方式

图片环绕示例:
代码如下(示例):

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

        .intro {
            width: 600px;
            height: 400px;
            background-color: #bbffaa;
            margin: 0 auto;
        }
        /*图片的盒子*/
        .img{
            width: 100px;
            height: 100px;
            /*若想调整字体和图片的距离*/
            margin: 5px 5px 0px 0px;
            float: left;
            /*background-color: #dddddd;*/
        }
        /*图片装满盒子*/
        .img img{
            width: 100%;
            height: 100%;
        }
        .contend{
            margin-top: 5px;
        }
        .clearfix::before,
        .clearfix::after{
            content: "";
            display: table;
            clear: both;
        }
    style>
head>
<body>

<div class="intro clearfix">
    
    <div class="img">
        <img src="1.jpg">
    div>
    
    <div class="contend">  花是被子植物(被子植物门植物,又称有花植物或开花植物)的繁殖器官,其生物学功能的是结合雄性精细胞与雌性卵细胞以产生种子。这一进程始于传粉,然后是受精,从而形成种子并加以传播。对于高等植物而言,种子便是其下一代,而且是各物种在自然分布的主要手段。同一植物上着生的花的组合称为花序。
        “花”在生活中亦常称为“花朵”或“花卉”。广义的花卉可指一切具有观赏价值的植物(或人工栽插的盆景),而狭义上则单指所有的开花植物。花卉一直广受人们的喜爱和使用,主要用于观赏,还能当食材或提炼原料。   div>
div>
body>
html>

结果:
CSS_浮动_第1张图片

二、浮动的设置和特点

( 让页面中的元素可以水平排列,通过浮动可以制作一些水平方向的布局 )

1、浮动的书写格式

通过浮动可以使一个元素向其父元素的左侧或右侧移动, 使用 float 属性来设置于元素的浮动

可选值:
none 默认值 ,元素不浮动
left 元素向左浮动
right 元素向右浮动

2、注意事项

1、 元素设置浮动以后,水平布局的等式便不需要强制成立
2、 元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置
3、 所以元素下边的还在文档流中的元素会自动向上移动

3、浮动特点

浮动的特点
浮动元素会完全脱离文档流,不再占据文档流中的位置
设置浮动以后元素会向父元素的左侧或右侧移动,
浮动元素默认不会从父元素中移出
浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高

三、设置浮动后,块元素和行内元素的特点

元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生变化

脱离文档流的特点:

块元素:
块元素不在独占页面的一行
脱离文档流以后,块元素的宽度和高度默认都被内容撑开
行内元素:
行内元素脱离文档流以后会变成块元素,特点和块元素一样

脱离文档流以后,不需要再区分块和行内了,都可以设置宽高,而且块元素不独占一行

四、页面小布局

CSS_浮动_第2张图片
代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .header,.body,.footer{
            margin: 0 auto;
        }
        .header{
            width: 1000px;
            height: 150px;
            background-color: #dddddd;
        }
        .body{
            width: 1000px;
            height: 500px;
            margin: 10px auto;
            background-color: #bbffaa;
        }
        .left{
            width: 150px;
            height: 500px;
            background-color: olive;
            float: left;
        }
        .contend{
            width: 680px;
            height: 500px;
            margin: 0 10px;
            background-color: darkblue;
            float:left;
        }
        .right{
            width: 150px;
            height: 500px;
            background-color: pink;
            float: left;
        }
        .footer{
            width: 1000px;
            height: 150px;
            background-color: red;
        }

    style>
head>
<body>
<div class="header">div>
<div class="body">
    <div class="left">div>
    <div class="contend">div>
    <div class="right">div>
div>
<div class="footer">div>
body>
html>

五、解决高度塌陷的问题

在不脱离文档流的情况下,父元素的高度默认是被子元素撑开,但是在父元素中,若子元素水平布局,float:left,那么子元素就脱离了文档流,父元素的高度就没有了,这就会照成高度塌陷的问题
如:(将上诉四中的body中的父元素的高度设置取消掉)
.body{ width: 1000px; /*height: 500px;*/ margin: 10px auto; background-color: #bbffaa; }CSS_浮动_第3张图片
下面的footer由于body的高度塌陷,会自动上移,照成页面布局混乱,那么我们如何解决高度塌陷的问题呢,使父元素的高度默认被其浮动的子元素撑开

解决方法:BFC(Block Formatting Context) 块级格式化环境

  • BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC
    开启BFC该元素会变成一个独立的布局区域
元素开启BFC后的特点
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素子元素和父元素上外边距不会重叠
开启BFC的元素可以包含浮动的子元素
  • 可以通过一些特殊方式来开启元素的BFC

1、设置元素的浮动(不推荐)

由于其子元素浮动造成的父元素塌陷,那么将父元素也设置为浮动,父元素就会默认被子元素撑开,但是此方法换汤不换药,并未根本性解决高度塌陷的问题,父元素下面的元素照样会往上移动,而且父元素本身我们想设置为块元素独占一行,现在也不是块元素了

.body{
            width: 1000px;
            /*height: 500px;*/
            margin: 10px auto;
            background-color: #bbffaa;
            /*方法一:设置为浮动*/
            float: left;
        }

CSS_浮动_第4张图片

2、将元素设置为行内块元素(不推荐)

 .body{
            width: 1000px;
            /*height: 500px;*/
            background-color: #bbffaa;
            /*方法二:设置为行内块*/
            display: inline-block;
            margin: 10px auto;
        }

CSS_浮动_第5张图片
缺点:在将其设置为行内块之后,其就不在独占一行,并不满足之前那个等式,那么它的margin也就无法控制其居中对齐,改变了它本身的块级元素的属性。如果我们想保持之前的效果,那么可以用下面的方法,不过就需要多套一个div

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .header,.body,.footer{
            margin: 0 auto;
        }
        .header{
            width: 1000px;
            height: 150px;
            background-color: #dddddd;
        }
        .body{
            width: 1000px;
            /*height: 500px;*/
            background-color: #bbffaa;
            margin: 10px auto;
            /*此处不设置行内块*/
        }
        .left{
            width: 150px;
            height: 500px;
            background-color: olive;
            float: left;
        }
        .contend{
            width: 680px;
            height: 500px;
            margin: 0 10px;
            background-color: darkblue;
            float:left;
        }
        .right{
            width: 150px;
            height: 500px;
            background-color: pink;
            float: left;
        }
        .footer{
            width: 1000px;
            height: 150px;
            background-color: red;
        }

    style>
head>
<body>
<div class="header">div>
<div class="body">
    
    <div style="display: inline-block">
        <div class="left">div>
        <div class="contend">div>
        <div class="right">div>
    div>
div>
<div class="footer">div>
body>
html>

CSS_浮动_第6张图片

3、将元素的overflow设置为一个非visible的值(常用,但是还是有点缺陷,只有在极个别的情况下会发生错误)

  • 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
  .body{
            width: 1000px;

            background-color: #bbffaa;
            margin: 10px auto;
            /*方法三:*/
            overflow: hidden;
        }

CSS_浮动_第7张图片

六、clear(非常重要)

原理:

设置清除浮动以后,浏览器会自动为元素添加一个上外边距, 以使其位置不受其他元素的影响

属性:

在一个元素中,我们使用clear属性来解决其上面元素浮动对其照成的影响

属性值
left 清除左侧浮动元素对当前元素的影响
right 清除右侧浮动元素对当前元素的影响
both 清除两侧中最大影响的那侧

CSS_浮动_第8张图片
CSS_浮动_第9张图片
并没有清除对右浮动的影响
CSS_浮动_第10张图片
clear:both 会取左浮动和有浮动中的最大值
CSS_浮动_第11张图片

七、最终解决高度塌陷的方案

通过css样式为父元素在末尾添加一个块,并将其块设置为清楚左右浮动的影响,这样子,父元素的内容会被子元素撑开,那么父元素的高度就和我们所期望的一样高了
CSS_浮动_第12张图片
但是上诉直接在html中加入div其实很没有必要,我们就希望通过css来影响它,将样式和html骨架分开,于是我们就通下诉
CSS_浮动_第13张图片

八、clearfix:高度塌陷➕上外边距折叠的现象

1、上外边距折叠的现象解决

上外边距折叠是因为父元素和子元素的上边距紧紧挨着,之前我们讲过两种解决方法,虽然不推荐,但是我们在这里还是回忆一下
外面的盒子是200x200 里面的盒子是100x100 我们想实现里面的盒子下移100个像素。

  1. 第一种方法: 外部盒子设置padding-top: 100px; 这样子我们会撑大盒子,本来父元素的盒子设置为200x200,现在虽然实现了但是父元素的合作撑大为了300x200,所以我们如果这样做就得吧父元素设置为100x200才能符合要求,但是这明显不是我们想要的
    CSS_浮动_第14张图片
  2. 第二种方法:border-top: 1px #bfa solid; 但是这样子会导致外面的盒子本来是200x200的,现在变大为201x200
    CSS_浮动_第15张图片
  3. 最终解决方法
    最好的解决方法是,我们可以用一个块给它个父元素隔开
    CSS_浮动_第16张图片
    上述书写会有一个字的大小隔开,我们通过下述css样式,将其设置为table可以解决
    CSS_浮动_第17张图片

2、clearfix双解决

CSS_浮动_第18张图片


总结

上述就是对于浮动的整体介绍,下面我们将学习定位

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号