【前端】CSS3学习笔记（四）——浮动

更新时间:2023-04-03 21:29:42 阅读：评论：0

课程链接

【狂神说java】css3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

学习笔记

display

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title><!--    display:        block 块元素        inline 行内元素        inline-block 是块元素 但是可以内联 在一行！        none 消失！        --><!--    可以实现行内元素排列方式 大部分情况下是使用float-->    <style>        div{            width: 100px;            height: 100px;            border: 1px solid red;        }        span{        红楼梦的人物关系    width: 100px;            height: 100px;            border: 1px solid red;            display: inline-block;        }    </style></head><body>    <div>        <p>块级元素：独占一行</p>        <p>h1～h6 p div 列表...</p>    </div>    <div>        <p>行内元素：不独占一行</p>        <p>span a img strong...</p>        <p>行内元素可以被包含在块级元素中 反之不行</p>    </div>    <div>div块元素</div>    <span>span行内元素</span></body></html>

float

div{    margin: 10px; 校园歌手大赛主持词   padding: 5px;}#father{    border: 1px black solid;    /*overflow: hidden;*/}#father:after{    content: '';    display: block;    clear: both;}.layer01{    background: rebeccapurple;    display: inline-block;    float: left;}.layer02{    background: red;    display: inline-block;    float: left;}.layer03{    background: blue;    display: inline-block;    float: left;    /*浮动情况下保持块元素*/    clear: both;}/*clear right 右侧不允许有浮动元素clear left  左侧不允许有浮动元素clear both  两侧不允许有浮动元素clear none*/.layer04{    background: yellow;    display: inline-block;    float: left;    clear: both;}.clear{    clear: both;    margin: 0;    padding: 0;}

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>浮动</title>    <link href="css/style.css" rel="stylesheet" type="text/css"></head><body><div id="father">    <div class="layer01"><img src="images/1.jpg" alt="">左浮</div>    <div class="layer02"><img src="images/2.png" alt="">左浮</div>    <div class="layer03"><img src="images/3.png" alt="">左浮</div>    <div class="layer04">        浮动的盒子可以向左浮动 也可以向右浮动 直到它的外边缘碰到包含框或另一个浮动盒子为止    </div><!--    <div class="clear"></div>-->    <div>        <h2>父级边框塌陷问题</h2>        <ul>            <li>增加父级元素高度<br>（简单 元素假设有了固定的高度 就会被限制）</li>            <li>增加一个空的div标签 清除浮动<br>（简单 代码中尽量避免空div）</li>            <li>在父级元素中增加一个overflow: hidden;<br>（简单 下拉的一些场景避免使用）</li>            <li>在父类添加一个伪类 after（写法稍复杂 没有副作用 推荐使用）</li>        </ul>    </div></div></body></html>

overflow

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title&l老师算公务员吗t;/title>地球半径多少公里    <style>        #content{            width: 200px;            height: 150px;            overflow: scroll;        }    </style></head><body>    <div id="content">        <img src="images/1.jpg">        <p>滚动条：overflow: scroll;</p>    </div></body></html>

对比

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title></head><body>    <div><h2>对增加免疫力吃什么好比</h2>        <ul>            <li>display<br>&nbsp;方向不可以控制</li>            <li>float<br>&nbsp;浮动起来的话会脱离标准文档流</li>        </ul>    </div></body></html>