CSS浮动-白红宇的个人博客

CSS浮动

发布日期：2021-04-30 21:02:25 浏览次数：118 分类：原创文章

本文共 1744 字，大约阅读时间需要 5 分钟。

display（方向不可控制）：

block：块元素、inline：行内元素、inline-block：是块元素，但也可以内联在一行、none：消失

<head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        div{                  width:100px;            height:100px;            border:1px solid red;            display:none;        }        span{                  width:100px;            height:100px;            border:1px solid red;            display:inline-block;        }    </style></head><body>    <div>div块元素</div>    <span>span行内元素</span></body>

浮动（float）：浮动起来会脱离标准文档流，要解决父级塌陷问题

<head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        div{                  margin:10px;            padding:5px;        }        #father{                  border:1px solid black;        }        /*会出现父级边框塌陷*/        .layer01{                  border:1px dashed black;            dispaly:inline-block;            float:right;        }        .layer02{                  border:1px dashed black;            font-size:10px;            line-height:25px;            dispaly:inline-block;            float:right;        }    </style></head><body>    <div id="father">        <div class="layer01"><img src="images/1.jpg"/></div>        <div class="layer02">你好</div>    </div></body>

父级边框塌陷问题

clear：right：右侧不允许有浮动元素，left：左侧不允许有浮动元素，both：两侧不允许有浮动元素

解决方法：

1.增加父级元素的高度

#father{         border:1px solid black;    height:800px;}

2.浮动元素后面增加一个空的div，消除塌陷

<style type="text/css">....clear{      	clear:both;    margin:0;    padding:0;}</style>...<div class="clear"></div>

3.overflow

#father{         border:1px solid black;    overflow:hidden;}

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

#father{         border:1px solid black;}#father:after{         content:'';    display:block;    clear:both;}

上一篇：【剑指offer】面试题55 - I. 二叉树的深度(java)

下一篇：get和post的联系与区别

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章