时间：2023-09-06 20:12:01 | 来源：网站运营
时间：2023-09-06 20:12:01 来源：网站运营
html+css浮动解决方案：
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; }</style></head><body> <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } .clearfix { /* 清除左右两侧浮动的影响 */ clear: both; }</style></head><body> <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --> <div class="top"> <div class="left"></div> <div class="right"></div> <div class="clearfix"></div> </div> <div class="bottom"></div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } /* 单伪元素清除浮动 和 额外标签法原理是一样的 */ .clearfix::after { content: ''; /* 伪元素添加的标签是行内, 要求块 */ display: block; clear: both; /* 为了兼容性 */ height: 0; visibility: hidden; }</style></head><body> <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> <!-- 通过css 添加标签 --> </div> <div class="bottom"></div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; } /* .clearfix::before 作用: 解决外边距塌陷问题 外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置 */ /* 清除浮动 */ .clearfix::before, .clearfix::after { content: ''; display: table; } /* 真正清除浮动的标签 */ .clearfix::after { /* content: ''; display: table; */ clear: both; }</style></head><body> <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --> <div class="top clearfix"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .top { margin: 0 auto; width: 1000px; /* height: 300px; */ background-color: pink; overflow: hidden; } .bottom { height: 100px; background-color: green; } .left { float: left; width: 200px; height: 300px; background-color: #ccc; } .right { float: right; width: 790px; height: 300px; background-color: skyblue; }</style></head><body> <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 --> <div class="top"> <div class="left"></div> <div class="right"></div> </div> <div class="bottom"></div></body></html>关键词：方案,解决,浮动
