目录
一 浮动
浮动布局
div:nth-of-type(1) {
background-color: red;
float: left;
}
div:nth-of-type(2) {
background-color: green;
float: left;
}
div:nth-of-type(3) {
background-color: blue;
float: left;
}
利用float设置浮动
二 浮动布局影响解决
h3 {
/* clear: left; */
/* 清除浮动对排版的影响 */
clear: both;
}
/* 父级元素添加伪类 */
未加clear：both如图所示：
添加clear:both时，修复高度塌陷问题，如图所示：
三、浮动标签父级高度塌陷的问题
设置5px外边距，box宽度设置让其3个排在一行。
方法一 解决父级元素高度塌陷问题
#box：：after{
content:'630px';
display:block;
clear:both;
}
设置不影响后面的排版。
clear：both起了决定性作用：
效果前：
高度塌陷问题：
加
#box：：after{
content:'630px';
display:block;
clear:both;
}
后：
再加：
<div id="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
clear：both起了决定性作用：自动修复高度塌陷问题。
四、before、after标签的使用
代码：
<body>
<p>我是中间的文字</p>
</body>
在style里面添加：
p::before {
content: '前面增加的文字';
color: red;
}
p::after {
content: '后面增加的文字';
color: green;
font-size: 20px;
}
效果如图所示：
列表的制作
bored-radius设置圆角
li::before将其转化为行内块元素
调节外边距margin
效果如图所示：
五、overflow属性的使用
overflow:hidden;
p{
width: 500px;
height: 100px;
border: 1px solid red;
line-height: 26px;
margin: 50px auto;
overflow: hidden;
}
效果如图所示：
p{
width: 500px;
height: 150px;
border: 1px solid red;
line-height: 26px;
margin: 50px auto;
/* 溢出时出现滚动条 */
overflow: scroll;
}
效果如图所示：
p{
width: 500px;
height: 300px;
border: 1px solid red;
line-height: 26px;
margin: 50px auto;
/* 有溢出时出现滚动条 否者不出现滚动条 */
overflow: auto;
}
当高度调至300px，不会出现滚动条
如图所示：
674
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
