css - Does width property affects clear?

Question

I was trying to understand float and clear. I have DIV with float left and then

element cleared right.

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
}


.text-clear {
  clear: right;
  
  background-color: red;
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>
  
  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>

Answer 1

To start, the use of clear here is useless simply because you are clearing the right and you have used float:left. So you will have the same output if you remove the clear.

To better understand what is happening, let's make the float element a bit transparent:

.container {
  border: solid thin #ccc;
}

.left-segment {
  float: left;
  background-color: #8FC9FF;
  height: 200px;
  width: 200px;
  opacity: 0.5
}

.text-clear {
  background-color: red;
  width: 200px;
  margin: 0; /*let's remove margin to avoid confusion*/
}

<div class='container'>
  <div class='left-segment'>I am LEFT DIV</div>

  <p class='text-clear'>Hey There I am P with some so called DUMMY data. And Dummy data again</p>
</div>