1. 浮动
相信很多很多朋友在刚开始接触使用浮动的时候肯定会遇到各种未解之谜&＃xff0c;明明 我的设置没错呀&＃xff0c;怎么就出错了呢&＃xff0c;就比如下图
;</p><p>}</p><p>.one {</p><p>width: 200px;</p><p>height: 200px;</p><p>background: rgb(220, 255, 180);</p><p>float: left;</p><p>}</p><p>.two {</p><p>width: 200px;</p><p>height: 200px;</p><p>background: rgb(180, 206, 255);</p><p>float: left;</p><p>}</p><p>.three {</p><p>width: 200px;</p><p>height: 200px;</p><p>background: rgb(255, 180, 230);</p><p>float: left;</p><p>}</p><p>原来是三个子元素宽的和超过了父元素的宽&＃xff0c;这样的话前两个子元素占完空间之后留下的空间已经不足以让第三个子元素挤进去了&＃xff0c;所以就被挤掉了&＃xff0c;那这时候该怎么解决呢&＃xff0c;其实很简单只需把父元素的宽度加宽或者把子元素的宽度减少就行了。</p><p>2. 关于高度塌陷问题</p><p>浮动(float)的框可以左右移动&＃xff0c;直至它的外边缘碰到包含框或另一个浮动框的外边缘。浮动框不属于文档中的普通流&＃xff0c;当一个元素浮动之后&＃xff0c;不会影响到块级元素的布局而只会影响内联元素(通常是文本)的排列&＃xff0c;文档中的普通流就表现得如同浮动框不存在一样。当浮动框高度超出包含框的时候&＃xff0c;就会出现包含框不会自动升高来闭合浮动元素(“高度塌陷”现象)。</p><p>通俗点来说&＃xff0c;就是如果父元素只包含浮动元素&＃xff0c;且父元素未设置高度和宽度的时候&＃xff0c;那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流&＃xff0c;包围它们的父块中没有内容了&＃xff0c;所以“”塌陷“”了。</p><p>如下图所示&＃xff0c;我把父元素的宽高注释掉&＃xff0c;就会出现下图中的情况&＃xff0c;****浮动元素脱离了文档流&＃xff0c;包围它们的父块中没有内容了&＃xff0c;所以就塌陷了</p><p><img src=)
.div {
/* width: 600px;
height: 400px; */
background: rgb(255, 180, 180);
}
.one {
width: 200px;
height: 200px;
background: rgb(220, 255, 180);
float: left;
}
.two {
width: 200px;
height: 200px;
background: rgb(180, 206, 255);
float: left;
}
.three {
width: 200px;
height: 200px;
background: rgb(255, 180, 230);
float: left;
}
把父元素宽高注释掉之后
&＃xff0c;在css里写上其样式&＃xff0c;通过CSS伪元素在容器内部元素最后添加了一个看不见的点“.”&＃xff0c;并且赋予clear属性来清除浮动。(如下图)</p><p>.clear::after {</p><p>content: )
display: block;
height: 0px;
line-height: 0px;
clear: both;
}
还有就是也可以给父元素加上浮动&＃xff0c;也可以解决问题
本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人
京公网安备 11010802041100号