关于CSS中设置浮动所遇到的问题
float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除,尽管仍然保持部分的流动性(绝对定位中并不脱离文档流)。
float的值:
left
表明元素必须浮动在其所在的块容器左侧的关键字。
right
表明元素必须浮动在其所在的块容器右侧的关键字。
none
表明元素不进行浮动的关键字。
inline-start
关键字,表明元素必须浮动在其所在块容器的开始一侧,在ltr脚本中是左侧,在rtl脚本中是右侧。
inline-end
关键字,表明元素必须浮动在其所在块容器的结束一侧,在ltr脚本中是右侧,在rtl脚本中是左侧。
拓展: direction属性,用来定义文本流的书写方向,可选值有ltr|rtl,默认值为 ltr。ltr(left-to-right)表示文本流从左到右书写,rtl(right-to-left)表示文本流从右到左书写。
如何清除浮动(常用)
方法一:给父元素添加高度
方法二:给父元素添加 overflow:hidden/auto
方法三:使用伪元素(推荐使用 )
<div class="box1">
<div class="items">元素1</div>
<div class="items">元素2</div>
<div class="items">元素3</div>
</div>
<div class="box2">
<div class="items">元素4</div>
<div class="items">元素5</div>
<div class="items">元素6</div>
</div>
.box1 {
background-color: blue;
*zoom: 1; // 用于兼容IE6
}
.box1::after { // 添加伪元素,在box1后添加一个不显示的空元素
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.box1 .items {
background-color: yellow;
}
.box2 {
background-color: red;
}
.box2 .items {
background-color: green;
}
.items {
float: left;
width: 200px;
}
页面显示如下
方式四:给父元素结尾处空标签添加 clean:both
这种方法较为简洁,但是会造成第二个盒子元素的margin-top属性无效。
<div class="box1">
<div class="items">元素1</div>
<div class="items">元素2</div>
<div class="items">元素3</div>
<div style="clear:both"></div>
</div>
<div class="box2">
<div class="items">元素4</div>
<div class="items">元素5</div>
<div class="items">元素6</div>
</div>
页面效果跟上图一样
在设置浮动时所遇到的一个问题
<div class="pic">
<div class="top">
<img src="./img/4.jpg" alt="">
</div>
<div class="box"></div>
</div>
*{
padding: 0;
margin: 0;
}
.pic{
width: 800px;
height: 500px;
background-color: blue;
}
.box{
width: 200px;
height: 200px;
float: right;
background-color: brown;
}
页面效果如下
这时我们可能会产生一个疑问,问什么红色方块为什么不浮动在父元素div的右上角覆盖图片呢?
这是因为元素浮动的一个特性,当子元素在父元素中浮动时且浮动元素上方还有一个块级元素,这时浮动元素只会在它所在的行上进行浮动,并不会往上跑。加大父元素的宽度也是如此,如下图。
此时若将图片所在div设置display:inlne-block,红色方块将会与此div占据同一行,如下图。
这是由于设置浮动后,使红色方块的display属性为inline-block,行元素的可在同一行排列,所以红色方块与图片div在同一行。
但是在缩小父元素的宽度后,图片与div也不能重叠,这是因为图片div的display属性都为inline-block,创建了BFC,根据BFC的特性,BFC的区域不会与float box重叠,所以并不能覆盖图片。
注:有关BFC的详解,可参考我另一篇博客。https://blog.csdn.net/Msinwln/article/details/106729386