• 微信号
目录

html笔记

您当前的位置:首页 > 我的笔记 > html笔记>css浮动布局-float

上一篇: css伪元素

下一篇: css盒子模型

css浮动布局-float

什么是浮动?

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄

float浮动属性值
描述
left 元素向左浮动
right 元素向右浮动
none 默认值。元素不浮动,并会显示在其在文本中出现的位置
inhert 规定应该从父元素继承 float 属性的值

实例

<div class="main">
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
    .box{
        float: left;
    }
</style>

浮动原理

div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流

代码

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<style>
    div {height: 50px;}
    .box1{width: 300px; background: red;}
    .box2{width: 200px; background: green;}
    .box3{width: 300px; background: yellow;}
    .box4{width: 200px; background: blue;}
</style>

结果

陵小宇博客-float浮动

要在一行显示多个div,就需要脱离文档流,这就需要使用float浮动;

代码

<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
<style>
    div {height: 50px;}
    .box1{width: 300px; background: red;}
    .box2{width: 200px; background: green;float: left;}
    .box3{width: 300px; background: yellow;}
    .box4{width: 200px; background: blue; float: right;}
</style>

结果

陵小宇博客-float浮动

浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流在不同的层次中

左浮动(float:left;),可以理解为漂浮起来后靠左排列,右浮动(float:right;)当然就是靠右排列

css清除浮动

在使用float浮动后,浮动会给整个HTML布局带来一定的影响,所以必须要清除浮动

clear属性

浮动会给整个HTML布局带来一定的影响,所以必须要清除浮动

属性值

  • none :默认值。允许浮动元素出现在左右两侧
  • left :在左侧不允许浮动元素
  • right :在右侧不允许浮动元素。
  • both :在左右两侧不允许浮动元
  • inherit :继承父元素的clear属性值。

clear只对本身起作用

实例

<div class="main">
    <div class="box"></div>
    <div class="box"></div>
</div>
<div style="clear:both;"></div>
<style>
    .box{
        float: left;
    }
</style>

overflow属性

当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,可在浮动元素的父级添加样式overflow:hidden;

属性值

  • visible :默认值。内容不会被修剪,会呈现在元素框之外,不剪切也不添加滚动条
  • auto :不显示超出内容,不剪切,会按照内容是否超出,自动添加,可用作清除浮动
  • hidden :内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷 的功能
  • scroll :内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容

实例

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

<style>
    .main{overflow: hidden;}
    .box{
        float: left;
    }
</style>

使用:after

为了减少空标签的多余,可采用给父级的伪元素进行样式清除浮动

实例

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

<style>
    .main::after{
        display: block;
        content: "";
        clear: both;
    }
    .box{
        float: left;
    }
</style>

上一篇: css伪元素

下一篇: css盒子模型