前端问题补充

前端问题补充

2022年2月14日添加两个浮动(float)的div下换行问题
2022年2月14日添加前端多页面时来回调用时，总是会出现属性不存在的问题问题

两个浮动(float)的div下添加div，div实际位置在浮动(float)的div之下；两个浮动(float)的div下换行

• 问题现象如下
  左右两个浮动div的高度是50px，而新添加的div高度是60px，可以看到两个float的div将新添加的div给覆盖了，这是调整新添的div的样式是困难的
• 代码如下

<div style="float: left; width: 50%; height: 50px; background: red;">这是左浮动</div>
<div style="float: right; width: 50%; height: 50px; background: blue;">这是右浮动</div>
<div style="margin: 3px 5px; padding: 3px 5px; width: 500px; height: 60px; background: yellow">这是新添加的div，设置长度和高度，设置内外边距</div>

• 解决方案
  清除浮动div的影响，添加<div style=“clear:both”></div>即可
• 解决后的效果* 解决后的代码

<div style="float: left; width: 50%; height: 50px; background: red;">这是左浮动</div>
<div style="float: right; width: 50%; height: 50px; background: blue;">这是右浮动</div>
<div style="clear:both"></div>
<div style="margin: 3px 5px; padding: 3px 5px; width: 500px; height: 60px; background: yellow">这是新添加的div，设置长度和高度，设置内外边距</div>

前端多页面时来回调用时，总是会出现属性不存在的问题

• 问题现象（F12页面）
• 解决方案
  在使用call和apply方法时，将对象传进去
• 解决后的代码

// athis代表a页面的this对象，bthis代表b页面的this对象
var athis = athis;
var bthis = bthis;
// 调用a页面的add方法
athis .add.call(athis); 或 athis .add.apply(athis);
// 调用b页面的add方法
bthis .add.call(bthis ); 或 bthis .add.apply(bthis );