温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html网页的布局方式之如何清除浮动

发布时间:2022-03-25 13:54:04 来源:亿速云 阅读:150 作者:小新 栏目:web开发

这篇文章主要介绍html网页的布局方式之如何清除浮动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  盒子的高度问题

  1.标准流中盒子的高度可以被内容高度撑起来;

  2.浮动流中浮动的内容不能撑起盒子的高度;

  为什么要清楚浮动?

  相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;

  清除浮动方式一:

  解决方案:

  给前面一个父元素设置高度

  注意点:

  在企业开发中,我们能不写高度就不写高度,所以这种方式用得很少;

  CSS:

  <style>

  *{

  margin:0;

  padding:0;

  }

  .box1{

  height:20px;//给前面盒子设置高度

  background-color:red;

  }

  .box2{

  background-color:green;

  }

  .box1p{

  width:100px;

  background-color:blue;

  }

  .box2p{

  width:100px;

  background-color:yellow;

  }

  p{

  float:left;

  }</style>

  body:

  <divclass="box1">

  <p>我是文字1</p>

  <p>我是文字1</p>

  <p>我是文字1</p></div><divclass="box2">

  <p>我是文字2</p>

  <p>我是文字2</p>

  <p>我是文字2</p>

  </div>

  清除浮动方式二:

  解决方案:

  给后面的盒子添加clear:both;属性

  clear属性取值:

  none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右浮动)

  left:不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)

  right:不要找前面的右浮动元素

  both:不要找前面的左浮动元素和右浮动元素

  注意点:

  当我们给某个元素添加clear属性之后,那么这个属性的margin属性就会失效;所以不推荐使用

  CSS:

  <style>

  *{

  margin:0;

  padding:0;

  }

  body{

  border:1pxsolid#000;

  }

  .box1{

  background-color:red;

  }

  .box2{

  background-color:green;

  clear:both;//给后面的盒子添加clear:both;属性

  margin-top:28px;

  }

  .box1p{

  width:100px;

  background-color:blue;

  }

  .box2p{

  width:100px;

  background-color:yellow;

  }

  p{

  float:left;

  }</style>

  清除浮动方式三:

  解决方案:

  外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear:both;属性;

  注意点:

  外墙法它可以让第二个盒子使用margin-top属性,

  外墙法不可以让第一个盒子使用margin-bottom属性,

  不过可以通过设置额外标签的高度来实现margin效果;

  搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;

  CSS:

  <style>

  *{

  margin:0;

  padding:0;

  }

  .box1{

  background-color:red;/*margin-bottom:10px;*///外墙法不可以让第一个盒子使用margin-bottom属性,

  }

  .box2{

  background-color:green;/*margin-top:10px;*///外墙法它可以让第二个盒子使用margin-top属性,

  }

  .box1p{

  width:100px;

  background-color:blue;

  }

  .box2p{

  width:100px;

  background-color:yellow;

  }

  p{

  float:left;

  }

  .wall{

  clear:both;//设置clear:both;属性;

  }

  .h30{

  height:20px;//设置额外标签的高度来实现margin效果;

  background-color:skyblue;

  }

  </style>

  <divclass="box1">

  <p>我是文字1</p>

  <p>我是文字1</p>

  <p>我是文字1</p></div><divclass="wallh30"></div>//外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<divclass="box2">

  <p>我是文字2</p>

  <p>我是文字2</p>

  <p>我是文字2</p></div>

  清除浮动方式四:

  解决方案:

  内墙法:

  1在第一个盒子中所有子元素最后添加一个额外的块级元素,

  2给这个额外添加的块级元素设置clear:both;属性

  注意点:

  内墙法它可以让第二个盒子使用margin-top属性

  内墙法它可以让第一个盒子使用margin-bottom属性

  <a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>

  外墙法和内墙法区别?

  外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度

  在企业开发中<a>不常用隔墙法</a>来清除浮动(隔墙法:外墙法和内墙法)

  CSS:

  <style>

  *{margin:0;padding:0;

  }.box1{background-color:red;/*margin-bottom:10px;*/

  }.box2{background-color:green;/*margin-top:10px;*/

  }.box1p{width:100px;background-color:blue;

  }.box2p{width:100px;background-color:yellow;

  }p{float:left;

  }.wall{clear:both;

  }.h30{height:20px;background-color:skyblue;

  }</style></head>

  <divclass="box1">

  <p>我是文字1</p>

  <p>我是文字1</p>

  <p>我是文字1</p>

  <divclass="wallh30"></div>//设置内墙</div><divclass="box2">

  <p>我是文字2</p>

  <p>我是文字2</p>

  <p>我是文字2</p></div>

以上是“html网页的布局方式之如何清除浮动”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI