HTML 浮动

TuSi_Cat

已于 2024-09-09 10:34:23 修改

阅读量485

点赞数 15

分类专栏： HTML 文章标签： html 前端 javascript

于 2024-07-12 17:11:34 首次发布

本文链接：https://blog.csdn.net/TuSi_Cat/article/details/140384204

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

inline-block和float的区别

标准文档流

标准文档流：

指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成:

块级元素（block）<h1><h6>、<p>、<div>、

列表内联元素（inline）<span>、<a>、<img/>、<strong>...

内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

display属性

值	说明
block	块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline	内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none	设置元素不会被显示

display特性

块级元素与行级元素的转变（block、inline）

控制块元素排到一行（inline-block）

控制元素的显示和隐藏（none）

display:block;  变为块级元素可以设置宽高
display:inline;  变为行内元素可以放在一条直线上
display:inline-block;  既可以设置宽高还能在一条直线上
display:none;   设置元素不被显示

浮动

float属性

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

div{
    float: lift;
    /*float: right*/
    /*float: none*/
}

边框塌陷

设置宽度和右浮动后，为什么边框塌陷了？怎么解决？

不设置高度且浮动会塌陷

（1）浮动元素脱离标准文档流、

（2）清除浮动

清除浮动

clear属性

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

img{
    clear: both；  清除两侧浮动
    clear: lift；  清除左侧浮动
    clear:right；  清除右侧浮动
}

父级边框塌陷解决办法

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？

（1）浮动元素后面加空div (简单，空div会造成HTML代码多余)

.clear{
    clear:both;
}

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02">浮动的盒子……</div>
  <div class="clear"></div>
</div>

（2）设置父元素的高度（简单，元素固定高会降低扩展性）

#father {height: 400px;}

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02">浮动的盒子……</div>
</div>

（3）父级添加overflow属性 (简单，下拉列表框的场景不能用)

#father {overflow: hidden;}

<div id="father">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02">浮动的盒子……</div>
</div>

overflow属性

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

（4）父级添加伪类after (写法比上面稍微复杂一点，但是没有副作用，推荐使用)

<div class="clear">
  <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
  <div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
  <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
  <div class="layer04">浮动的盒子……</div>
</div>

.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}