浮动

浮动

display

1.display : block 变为块元素
2.display : inline-block 既是块元素 又是 行内元素 ,保持了块元素的特性但是可以写在一行
3.display : inline 变为行内元素
4.display : none 直接消失


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Displaytitle>
    <style>
        /*
        1.display : block 变为块元素
        2.display : inline-block 既是块元素 又是 行内元素 ,保持了块元素的特性但是可以写在一行
        3.display : inline 变为行内元素
        4.display : none 直接消失
        */
        div{
      
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
      
            width: 100px;
            height: 100px;
            border: 1px dashed green;
            display: inline-block;
        }
    style>
head>
<body>
<div>div块元素div>
<span>span行内元素span>
body>
html>

浮动 float


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>floattitle>
    <link rel="stylesheet" href="./float.css">
head>
<body>
<div id="pic">
    <div class="layer1"><img src="./1.png" alt="">div>
    <div class="layer2"><img src="./2.png" alt="">div>
    <div class="layer3"><img src="./3.png" alt="">div>
div>

body>
html>
div{
     
    margin: 10px;
    padding: 5px;
}
#pic{
     
    border: 1px black solid;
}
.layer1{
     
    border: 1px red solid;
    display: inline-block;  /*块元素 设置为 行内元素*/
    float: left;   /*向左浮动*/
}
.layer2{
     
    border: 1px green solid;
    display: inline-block;
    float: left;   /*向左浮动*/
}
.layer3{
     
    border: 1px purple solid;
    display: inline-block;
    float: left;   /*向左浮动*/
}

但是float浮动会有问题:在调整页面大小的时候,页面会由于浮动而重新排版边框塌陷

浮动_第1张图片

页面缩小之后:

浮动_第2张图片

解决方案 clear : both ;

clear属性

  1. clear : right ; 清除右侧浮动,右侧不允许有浮动元素
  2. clear : left ; 清除左侧浮动,左侧不允许有浮动元素
  3. clear:both ; 清除两侧浮动
  4. clear : none ;
<div id="pic">
    <div class="layer1"><img src="./1.png" alt="">div>
    <div class="layer2"><img src="./2.png" alt="">div>
    <div class="layer3"><img src="./3.png" alt="">div>
    <div class="layer4">
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
        <p>123213213p>
    div>
div>
.layer4{
     
    float: left;
    clear: both; /*结束浮动*/
}

父级边框塌陷问题

在为元素设置float属性之后,父级的边框会塌陷 ,如上面html中,当3个子div 设置为 浮动的时候,最大的div会被压缩

浮动_第3张图片

**解决方法: **

  1. 增加父级元素高度

    但如果新增的元素 超过了父元素, 就没用了

  2. 增加一个空的div标签,**清除浮动 **clear : both;

    <div class="layer5">div>
    
    .layer5{
           
        margin: 0;
        padding: 0;
        clear: both;
    }
    
  3. overflow

    可以在父级元素中添加一个 overflow:hidden; , 如果内容超出去了,内容就会被切掉

    内容文本超出了规定的大小,可以使用overflow来解决溢出问题

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            #pic{
            
                /*设置宽高为150px*/
                width: 150px; 
                height: 150px;
            }
        style>
    head>
    <body>
    <div id="pic">
        <div class="layer1"><img src="./1.png" alt="">div>
        <div class="layer2"><img src="./2.png" alt="">div>
        <div class="layer3"><img src="./3.png" alt="">div>
    div>
    body>
    html>
    

    显然 实际内容 超出了规定的150px
    浮动_第4张图片

<style>
        #pic{
      
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
    style>

overflow : hidden ; 自动截取到规定的大小
浮动_第5张图片

<style>
    #pic{
      
        width: 150px;
        height: 150px;
        overflow: scroll;
    }
style>

**overflow : scroll ; ** 设置一个滚动条

浮动_第6张图片

4.父类添加一个伪类 after 推荐使用

#pic:after{
     
    content: '';
    display: block;
    clear: both;
}

display 与 float对比

  • display 不可控制党项
  • float 更加灵活,但是需要解决父级边框塌陷问题

你可能感兴趣的:(前端)