CSS |
您所在的位置:网站首页 › css删除样式 › CSS |
一、基本样式
一个父元素中有两个子元素,其中两个子元素分别左右浮动。 HTML代码: CSS代码: .father { width: 400px; border: 1px solid red; } .son { width: 100px; height: 100px; background-color: aqua; } .left { float: left; } .right { float: right; }效果图: 可以看到,父元素的高度原先由子元素撑起,因为子元素浮动,导致父元素高度坍塌。 二、清除浮动的5种方法 1、给父元素设置height直接给父元素的height属性设一个固定值: .father { height: 100px; } 2、clear: both向父元素中最后一个子元素后添加一个div: .clear { clear: both; } 3、给父元素设置float直接让父元素也浮动起来,打不过就加入: .father { float: left; } 4、给父元素设置overflowoverflow属性为元素对溢出内容的处理方式,可以将其值设置为hidden或者auto来包含子元素: .father { overflow: hidden; /* 或者 */ /* overflow: auto; */ } 5、给父元素设置after伪元素可以添加一个不占用空间的after伪元素,将其clear属性设置为both: .father::after { content: ''; display: block; clear: both; } 三、总结 添加子元素设置clear和添加after伪元素设置clear都差不多,但是代码量偏多; 给父元素设置height会导致父元素高度固定,如果要求父元素高度随子元素高度变化而变化那这个方法就不太合适; 给父元素设置float可能会破坏原先的布局; 给父元素设置overflow建议使用。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |